jQuery单击菜单

Question

我在这个菜单上工作:

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.我想要的是..如果它是#menu的第一个,它应该寻找submenu-1和hero-1并且滑落.

我真的很感激任何帮助.

谢谢!

Answer 1

向原始项目添加数据属性a。（工作示例- 由于没有提供 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 -->