jQuery:菜单在单击时显示/消失-V2 [英] jQuery: menus appear/disappear on click - V2
问题描述
与第一个问题的不同之处在于我的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 & Services (1)</span></li>
<li><span>Support & 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:
- 用户点击导航栏中的另一个项目.
- 用户单击导航栏中的相同项目.
- 用户单击megamenu内的关闭按钮"(X)图形(为简单起见,未在HTML中显示).
- The user clicks on another item in the nav bar.
- The user clicks on the same item in the nav bar.
- 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屋!