jQuery:菜单在单击时显示/消失-V2 [英] jQuery: menus appear/disappear on click - V2

问题描述

V1: jQuery:单击时显示/消失菜单

与第一个问题的不同之处在于我的HTML结构.一旦我开始使用CSS实现巨型菜单，事情就没有显示出我需要它们的方式.

The difference with the first question is my HTML structure. Once I started implementing the megamenus with CSS, things weren't displaying the way I needed them to.

以下是基本的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应该在以下情况下关闭:

I need a way to have each link activate its own megamenu, and each megamenu should close when:

1. 用户点击导航栏中的另一个项目.
2. 用户单击导航栏中的相同项目.
3. 用户单击megamenu内的关闭按钮"(X)图形(为简单起见，未在HTML中显示).

1. The user clicks on another item in the nav bar.
2. The user clicks on the same item in the nav bar.
3. The user clicks on a 'close button' (X) graphic inside the megamenu (not shown in the HTML for simplicity sake).

我知道这与Tabs的工作原理非常相似，不同之处在于可以关闭/折叠每个Tab容器.这有道理吗?

I know this is very similar to how Tabs work, the difference is that each tab container can be closed/collapsed. Does that make sense?

同样，我不是jQuery/JS的人(您可以看到)，所以任何帮助将不胜感激.

Again, I'm not a jQuery/JS person (you can see that), so any help would be extremely appreciated.

谢谢

推荐答案

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

Here's the answer to this, I couldn't find a way to use the HTML structure I mentioned above:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！