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

【问题标题】：jQuery or PHP - Show/Hide a DIV or LI if another DIV is enabled/disabledjQuery 或 PHP - 如果启用/禁用另一个 DIV，则显示/隐藏 DIV 或 LI
【发布时间】：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

标签： php jquery toggle

【解决方案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/

【讨论】：