मैं अपने ड्रॉपडाउन मेनू के साथ एक मुद्दा रहा हूँ।मेरे पास काम करने वाले मेनू का ड्रॉपडाउन हिस्सा है, लेकिन जब मैं एक मुख्य नेविगेशनल लिंक पर क्लिक करता हूं तो यह पैरेंट उल के लिए प्रासंगिक लोगों का अनावरण करने के बजाय सभी सूची आइटम का खुलासा करता है।
मैंने फ़ाइल को jsfiddle पर अपलोड किया है। क्या आप कृपया मेरी मदद करें: http://jsfiddle.net/7rwhP/1/
<div id="secondary-nav"><!--secondary-nav-->
<ul>
<li><a href="#.html">Current Article</a>
<ul>
<li><a href="#.html">Example 1</a></li>
</ul>
</li>
<li><a href="#.html">Past Articles</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
<li><a href="#.html">Tradition</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->
उत्तर:
जवाब के लिए 0 № 1आपको अपना जावास्क्रिप्ट संशोधित करने की आवश्यकता है ताकि आप "टी ट्रिगर" न हों slideToggle सब पर ul ul आइटम, और आपको क्लिक श्रोता को एक ली - उपयोग में जोड़ना होगा #secondary-nav ul उस सूची के भीतर क्लिक करने वाले किसी भी आइटम के लिए घटना पर क्लिक करें।
इसे इस्तेमाल करे:
$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
})
याद रखें, jQuery में चयनकर्ता सीएसएस चयनकर्ताओं की तरह हैं। जब आप क्लिक इवेंट को बाइंड करते हैं #secondary-nav ul, जब आप उस सूची में कहीं भी क्लिक करेंगे तो यह ट्रिगर हो जाएगा, क्योंकि सभी सूची आइटम वास्तव में उल के बच्चे हैं। आपका मूल क्लिक हैंडलर #secondary-nav ul ul "सभी सूचियों को टॉगल करें जो किसी सूची के बच्चे हैं", लेकिन आप अधिक स्पष्ट रूप से "उस सूची को क्लिक करना चाहते हैं जो कि क्लिक की गई सूची आइटम का एक बच्चा है"।
जवाब के लिए 0 № 2
आपको उपयोग करना चाहिए $(this).children()
$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
});
आपको इस सीएसएस को भी जोड़ना चाहिए
#secondary-nav ul li {
white-space:nowrap;
}
डेमो: सीएसएस से ऊपर आवेदन करने के बाद