मेनू पर jQuery Arrays - jquery, arrays, list

मैं इसके समान एक HTML संरचना का उपयोग कर रहा हूं

<ul class="top-level">
<li><a href="#"></a>
<ul class="dropdown">
<li><a href="#"></a>
</li>
<ul>
<li>
</ul>

इस तरह jQuery के साथ

$(".top-level").on("click", "a", function() {
$(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

सिवाय इसके कि लाने के लिए एक लिंक पर क्लिक करने के बादएक ड्रॉपडाउन नीचे, जब मैं किसी अन्य ड्रॉपडाउन को नीचे लाने के लिए किसी अन्य शीर्ष-स्तरीय लिंक पर क्लिक करता हूं, तो पहला ड्रॉपडाउन गायब नहीं होता है। क्या मैं चाहता हूं कि उन्हें छोड़कर किसी अन्य तत्व को चुनने के लिए एक रास्ता है। खुद को?

अग्रिम में धन्यवाद

उत्तर:

$(".top-level").on("click", "a", function() {
var theDrop = $(this).next("ul.dropdown"); //convert dropdown in question to var
theDropState = theDrop.is(":visible"); //record current state of dropdown
$("ul.dropdown").hide(); //hide all dropdowns
if(!theDropState){ theDrop.show(); } //if state was invisible, show dropdown
});

यह विधि सांविधिक है और हर बार सही स्थिति तय करेगी। टॉगल का उपयोग करने के साथ आप चीजों को करने का जोखिम उठाते हैं $("ul.dropdown").toggle(); एक बार में सभी ड्रॉप-डाउन के कारण।

इसे प्रयोग करें

$(".top-level").on("click", "a", function(e) {
e.preventDefault();
$("ul.dropdown").hide();
$(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

और यदि आप पहले से खोले गए ड्रॉप डाउन पर क्लिक करते हैं तो यह पहले छिप जाएगा और फिर दिखाई देगा। इससे बचने के लिए इसे संशोधित करें

$(".top-level").on("click", "a", function(e) {
e.preventDefault();
if($(this).next("ul.dropdown").is("visible"))
return;
// as the target drop down is already visible do nothing and return
$("ul.dropdown").hide();
$(this).next("ul.dropdown").toggle();
// Show / hide the corresponding sub-menu
});

आप किसी भी दृश्यमान ड्रॉप डाउन सूची को पहले छिपा सकते हैं। फिर आप आगे बढ़ते हैं और प्रदर्शित करते हैं कि वर्तमान में आप क्लिक कर रहे हैं

$(".top-level").on("click", "a", function() {
$("ul.dropdown").fadeOut(100); //hide any visible drop down first
$(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

आशा है कि आप क्या चाहते हैं।