Question

此问题的V1可在此处找到：jQuery: menus appear/disappear on click

与第一个问题的区别在于我的HTML结构。一旦我开始使用CSS实现megamenus，事情并没有显示出我需要它的方式。

以下是基本HTML：

<ul>
 <li><span>Products &amp; Services (1)</span></li>
 <li><span>Support &amp; Training (2)</span></li>
 <li><span>Communities (3)</span></li>
 <li><span>Store (4)</span></li>
</ul>
<div class="megamenu">1111</div>
<div class="megamenu">2222</div>
<div class="megamenu">3333</div>
<div class="megamenu">4444</div>

与第一个菜单一样，这就是我需要的：

我需要一种方法让每个链接激活它自己的megamenu，并且每个megamenu应该在以下时间关闭：

用户点击导航栏中的另一个项。
用户点击导航栏中的相同项。
用户点击megamenu中的“关闭按钮”（X）图形（为简单起见，未在HTML中显示）。

我知道这与Tabs的工作方式非常相似，不同之处在于每个标签容器都可以关闭/折叠。这有意义吗？

同样，我不是一个jQuery / JS人（你可以看到），所以任何帮助都会非常感激。

谢谢，

Answer 1

根据需要调整早期的accepted answer应该相当简单。您仍然拥有span s（虽然我没有看到top-nav ID）。

您需要查看.click处理程序。您还需要弄清楚如何将包含megamenu的div与您想要触发它的每个范围相关联。唯一ID可能有效。

Answer 2

我使用CSS diplay属性+ id属性，如下所示：

<script>
    current = "m0"; // div with id="m0" is currently diplayed
    function show_or_hide ( id )
    {
        if ( current ) //if something is displayed
        {   
            document.getElementById ( current ).style.display = "none";
            if ( current == id ) //if <div> is already diplayed
            {                           
                current = 0;
            }
            else
            {
                document.getElementById ( id ).style.display = "block";
                current = id;
            }
        }
        else //if nothing is displayed
        {
            document.getElementById ( id ).style.display = "block";
            current = id;
        }
    }
</script>

<ul>
 <li onclick="show_or_hide('m0')"><span>Products &amp; Services (1)</span></li>
 <li onclick="show_or_hide('m1')"><span>Support &amp; Training (2)</span></li>
 <li onclick="show_or_hide('m2')"><span>Communities (3)</span></li>
 <li onclick="show_or_hide('m3')"><span>Store (4)</span></li>
</ul>
<div class="megamenu" id="m0">1111</div>
<div class="megamenu" id="m1" style="display: none">2222</div>
<div class="megamenu" id="m2" style="display: none">3333</div>
<div class="megamenu" id="m3" style="display: none">4444</div>

Answer 3

这是对此的答案，我找不到使用上面提到的HTML结构的方法：

<强> HTML

<div id="megamenus" class="click-menu">
 <h6>Link 1</h6>
 <div>Content...</div>
 <h6>Link 2</h6>
 <div>Content...</div>
 <h6>Link 3</h6>
 <div>Content...</div>
</div>

<强>的jQuery

$(function(){
//Megamenus 
$('.click-menu div').hide();
$('.click-menu h6').click(function(){
    if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $(this).parent().next().slideUp('fast');
  } else {
    $('.click-menu h6').removeClass('selected');
    $(this).addClass('selected');
    $('.click-menu div').slideUp('fast');
    $(this).parent().next().slideDown('fast');
    }   
  });
});

jQuery：菜单在点击时显示/消失 - V2

3 个答案: