jQuery 或 PHP - 如果启用/禁用另一个 DIV，则显示/隐藏 DIV 或 LI

Posted 2023-02-25

【中文标题】jQuery 或 PHP - 如果启用/禁用另一个 DIV，则显示/隐藏 DIV 或 LI

【英文标题】：jQuery or PHP - Show/Hide a DIV or LI if another DIV is enabled/disabled

【发布时间】：2011-04-25 09:14:28

【问题描述】：

我还有一个问题，不确定是通过 php 还是 jQuery 来完成，所以我将它发布在两个部分中。

基本上我想要的是这样的：

我在一个页面上有几个 DIV，包括 4 个名为“Spring”、“Summer”、“Autumn”和“Winter”的 div。

我有另一个名为“菜单”的 DIV。在菜单中，您可以通过 jQuery 切换四个季节 DIV 中的每一个。还有几个列表项，例如“溜冰场”和“冰淇淋店”。 “溜冰场”仅在选择“冬季”时可用，而“冰淇淋店”则在选择夏季时可用。

我想做的，最好是通过 jQuery，在启用“冬季”DIV 时从菜单中隐藏“冰淇淋店”，或者在启用“夏季”DIV 时隐藏“Ice Rinks”。

基本上，我需要一种方法来选择性地或动态地（可能通过列表项上的类）将菜单项分配给 4 个季节 DIVS 之一，然后在关联季节 DIV 时从菜单中隐藏这些项目已关闭。

这是否可能，如果可以，是否有人有任何代码示例说明如何实现？

谢谢 扎克

【问题讨论】：

您能添加您的 html 代码吗？

这里 -- jsfiddle.net/vDxRC

【参考方案1】：

这是可能的。你可以这样做

HTML：

<div id="spring" class="menubtn">Spring</div>
<div id="summer" class="menubtn">Summer</div>
<div id="autumn" class="menubtn">Autumn</div>
<div id="winter" class="menubtn">Winter</div>
<ul id="itemlist">
    <li class="winter">Ice Rinks</li>
    <li class="summer">Ice Cream Stores</li>
</ul>  

javascript：

$(document).ready(function()
    $('.menubtn').click(function()
        // Handle Menu
        $('.menubtn').removeClass('active')
        $(this).addClass('active');

        // Handle item list. This is what you want to do 
        $('#itemlist li').hide();
        $('#itemlist li.' + $(this).attr('id')).show();
    );
);

您可以在此处查看演示：http://jsfiddle.net/ynhat/Cgeus/3/