कस्टम jQuery ड्रॉपडाउन - jquery, ड्रॉप-डाउन-मेनू

मैं jQuery का उपयोग करके एक कस्टम सरल ड्रॉपडाउन बना रहा हूं जो राज्य के आधार पर एक तत्व को छुपाता / दिखाता है।

अब मेरे पास समस्या यह है कि जब आप दिखाए गए तत्व के ऊपर जाते हैं तो यह छिप जाता है, आप अपने माउस को उस ड्रॉपडाउन में स्थानांतरित कर सकते हैं जिसे बनाया गया था।

इसे ठीक करने के बारे में कोई विचार, क्या मेरे पास करने का एक आसान तरीका है? मैं इसे पुन: उपयोग करने जा रहा हूं और सुनिश्चित करने का सबसे अच्छा तरीका है कि मैं छह बार कॉपी / पेस्ट करने की आवश्यकता नहीं है।

$(function(){
$("#dog-nav").hover(
function(){
$(".sub-drop-box-dog").show("fast");
},
function(){
$(".sub-drop-box-dog").hide("fast");
}
);
$("#cat-nav").hover(
function(){
$(".sub-drop-box-cat").show("fast");
},
function(){
$(".sub-drop-box-cat").hide("fast");
}
);

});

उत्तर:

आपको इस तरह HTML का उपयोग करना चाहिए:

<div id="#menu">
<ul>
<li>
<a href="#">Menu1</a>
<ul>
<li><a href="#">Submenu A</a></li>
<li><a href="#">Submenu B</a></li>
<li><a href="#">Submenu C</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="#">Submenu D</a></li>
<li><a href="#">Submenu E</a></li>
<li><a href="#">Submenu F</a></li>
</ul>
</li>
</ul>
</div>

और फिर इस तरह jQuery:

$ ("# मेन्यू ली")। होवर (फंक्शन () { $ (This) .find ( "उल") शो ( "fast")। }, समारोह() { । $ (This) .find ( "उल") को छिपाने ( "तेज"); });

फिर जब आप सबमेनस पर मंडराते हैं, तो आप वास्तव में अभी भी मुख्य मेनू पर मंडराते हैं और फिर यह बंद नहीं होगा। उपरोक्त उदाहरण भी लचीला है, इसलिए आपको प्रत्येक मेनू के लिए इसे एक बार लिखना नहीं है।

माउस पायलटिंग त्रुटि को समायोजित करने के लिए, आपको जांच करनी चाहिए jQuery.hoverIntent और / या jQuery.superfish प्लगइन्स।