jQuery单击菜单
jQuery单击菜单
提问于 2011-12-22 22:08:51
我正在准备这个菜单：
HTML：
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->
<ul class="submenu submenu-1">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<div class="hero hero-1">content</div>
<div class="hero hero-2">content</div>
<div class="hero hero-3">content</div>
<div class="hero hero-4">content</div>jQuery：
$('#menu li a').click(function () {
$('#menu li').removeClass('active');
$('.submenu, .hero').slideDown('normal');
});
$('.submenu, .hero').hide();..。它当前显示所有的子菜单和主人公div。我想要的是..如果它是#菜单的第一个li，它应该查找submenu-1和hero-1并向下滑动。
我真的很感谢任何人的帮助。
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-12-22 22:35:49
向原始a项添加数据属性。(working sample --因为没有提供css，所以样式并不完全正确，但是你明白了)。
<ul id="menu">
<li><a href="#" data-slide="1">Item 1</a></li>
<li><a href="#" data-slide="2">Item 2</a></li>
<li><a href="#" data-slide="3">Item 3</a></li>
<li><a href="#" data-slide="4">Item 4</a></li>
</ul><!-- end #menu -->然后，您的JS可以提取该ID，以便显示正确的、相关的子菜单和内容。
$('#menu li a').click(function () {
//Fetch the value of the 'slide' data attribute of the clicked link
var id = $(this).data('slide');
$('.submenu, .hero').hide();
$('#menu li').removeClass('active');
$('.submenu-'+id+', .hero-'+id).slideDown('normal');
});
$('.submenu, .hero').hide();与前面提到的一些其他方法(如.eq()或.index())相比，使用此方法的好处是您可以重新安排原始菜单项的顺序，并且它不会抛出拉出哪个内容项。所以这个HTML仍然可以完美地工作。
<ul id="menu">
<li><a href="#" data-slide="3">Item 3</a></li>
<li><a href="#" data-slide="1">Item 1</a></li>
<li><a href="#" data-slide="4">Item 4</a></li>
<li><a href="#" data-slide="2">Item 2</a></li>
</ul><!-- end #menu -->Stack Overflow用户
发布于 2011-12-22 22:33:18
您可以像这样使用jQuery的.index()和.eq()：http://jsfiddle.net/bUjud/1/
请参阅：http://api.jquery.com/eq/和http://api.jquery.com/index/
Stack Overflow用户
发布于 2011-12-22 22:42:05
DEMO
为此：
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->
<ul class="submenu submenu-1">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
<li><a href="#">Item 2.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<div class="hero hero-1">content 1</div>
<div class="hero hero-2">content 2</div>
<div class="hero hero-3">content 3</div>
<div class="hero hero-4">content 4</div>使用此jQuery：
$('#menu li a').click(function () {
var index = $('#menu li a').index(this) + 1;
$('.submenu, .hero').hide();
$('#menu li').removeClass('active');
$('.submenu-' + index + ', .hero-' + index).slideDown('normal');
});
$('.submenu, .hero').hide();并查看jQuery.index()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8605059
复制相关文章
相似问题
腾讯云开发者
