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(); 

...它目前顯示所有子菜單和英雄divs。我想要的是..如果它是#menu的第一個，它應該尋找submenu-1和hero-1並滑動。

我非常感謝任何幫助。

謝謝！

Answer 1

添加數據屬性原來的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 --> 

Answer 2

你可以使用jQuery的.index()和.eq()想在這個小提琴：http://jsfiddle.net/bUjud/1/
參見：http://api.jquery.com/eq/和http://api.jquery.com/index/

Answer 3

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()