সুতরাং আপনার এই কোডটি রয়েছে:
<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();
})
})
})
এটি খুব ভালভাবে কাজ করে এবং ব্যাখ্যাটি এখানে: আমাদের কাছে একটি বোতাম এবং একটি মেনু রয়েছে। আমরা যখন বোতামটি হোভার করি তখন আমরা মেনুটি প্রদর্শন করি এবং যখন বোতামটি মাউসআউট করি আমরা 100 মিমি পরে মেনুটি আড়াল করি। আপনি যদি ভাবছেন যে আমি কেন এটি ব্যবহার করি কারণ এটি আপনার মেনুর উপরের বোতাম থেকে কার্সারটি টেনে আনার জন্য সময় প্রয়োজন। আপনি যখন মেনুতে থাকবেন তখন সময়টি পুনরায় সেট হয়ে যায় এবং আপনি যত খুশি সেখানে থাকতে পারেন। আপনি মেনু থেকে প্রস্থান করার সময়, কোনও সময়সীমা ছাড়াই আমরা তাত্ক্ষণিকভাবে মেনুটি আড়াল করব।
আমি অনেক প্রকল্পে এই কোডটি ব্যবহার করেছি, যদি এটি ব্যবহার করে আপনার কোনও সমস্যা দেখা দেয় তবে নির্দ্বিধায় আমাকে প্রশ্ন জিজ্ঞাসা করুন।