तो आपके पास यह कोड है:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
आम तौर पर यह क्लिक इवेंट पर काम करता है, और आप चाहते हैं कि यह हॉवर ईवेंट पर काम करे। यह बहुत सरल है, बस इस जावास्क्रिप्ट / jquery कोड का उपयोग करें:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
यह बहुत अच्छी तरह से काम करता है और यहाँ स्पष्टीकरण है: हमारे पास एक बटन है, और एक मेनू है। जब हम बटन दबाते हैं तो हम मेनू को प्रदर्शित करते हैं, और जब हम बटन को दबाते हैं तो हम मेनू को 100ms के बाद छिपाते हैं। यदि आप आश्चर्य करते हैं कि मैं इसका उपयोग क्यों कर रहा हूं, तो इसलिए कि आपको मेनू पर बटन से कर्सर को खींचने के लिए समय चाहिए। जब आप मेनू पर होते हैं, तो समय रीसेट हो जाता है और आप जितनी बार चाहें वहां रह सकते हैं। जब आप मेनू से बाहर निकलते हैं, तो हम बिना किसी टाइमआउट के तुरन्त मेनू को छिपा देंगे।
मैंने कई परियोजनाओं में इस कोड का उपयोग किया है, अगर आपको इसका उपयोग करने में कोई समस्या आती है, तो मुझसे प्रश्न पूछने में संकोच न करें।