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 का पहला ली है, तो इसे उपमेनू -1 और नायक -1 और स्लाइडडाउन देखना चाहिए।

मैं वास्तव में किसी भी मदद की सराहना करता हूं।

धन्यवाद!

Answer 1

मूल a आइटम के लिए एक डेटा विशेषता जोड़ें। (working sample - चूंकि कोई सीएसएस प्रदान नहीं किया गया था, शैलियों बिल्कुल सही नहीं हैं, लेकिन आपको विचार मिलता है)।

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

फिर आपका जेएस सही, संबंधित उप मेनू और सामग्री दिखाने के लिए उस आईडी को निकाल सकता है।

$('#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()