HTML में बूटस्ट्रैप ड्रॉपडाउन क्लिक पर बंद होने से रोकें

समस्या

बूटस्ट्रैप ड्रॉपडाउन डिफ़ॉल्ट रूप से कहीं भी क्लिक करने पर बंद हो जाता है (बाहरी क्लिक पर)। ड्रॉपडाउन मेनू के अंदर क्लिक करने पर भी यह बंद हो जाता है, जो मेनू आइटम्स (चेकबॉक्स, फॉर्म, नेस्टेड मेनू) के लिए अवांछित है।

समाधान 1: hide.bs.dropdown इवेंट रोकें

<script>
// jQuery के साथ
$('#myDropdown').on('hide.bs.dropdown', function (e) {
    // यदि क्लिक ड्रॉपडाउन मेनू के अंदर हुआ, तो छिपाने से रोकें
    if (e.clickEvent && $(e.clickEvent.target).closest('.dropdown-menu').length) {
        return false;
    }
});

// या सरल: ड्रॉपडाउन मेनू के अंदर सभी क्लिक्स पर रोकें
$('.dropdown-menu').on('click', function(e) {
    e.stopPropagation();
});
</script>

समाधान 2: डेटा एट्रिब्यूट (बूटस्ट्रैप 5+)

<!-- data-bs-auto-close="inside" : केवल बाहरी क्लिक पर बंद, अंदर क्लिक पर नहीं -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" 
            data-bs-toggle="dropdown" data-bs-auto-close="inside">
        ड्रॉपडाउन
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">आइटम 1</a></li>
        <li><a class="dropdown-item" href="#">आइटम 2</a></li>
        <li><hr class="dropdown-divider"></li>
        <li>
            <label class="dropdown-item d-flex align-items-center gap-2">
                <input type="checkbox" class="form-check-input"> चेकबॉक्स आइटम
            </label>
        </li>
    </ul>
</div>

data-bs-auto-close विकल्प

समाधान 3: stopPropagation के साथ इवेंट हैंडलर

<script>
// Vanilla JS (बूटस्ट्रैप 5)
document.querySelectorAll('.dropdown-menu').forEach(menu => {
    menu.addEventListener('click', (e) => {
        e.stopPropagation(); // इवेंट बबलिंग रोकें
    });
});

// बूटस्ट्रैप 4/5 jQuery
$('.dropdown-menu').on('click', function(e) {
    e.stopPropagation();
});

// नेस्टेड ड्रॉपडाउन के लिए
$('.dropdown-submenu > .dropdown-toggle').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).next('.dropdown-menu').dropdown('toggle');
});
</script>

पूर्ण कार्यशील उदाहरण (बूटस्ट्रैप 5)

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>बूटस्ट्रैप ड्रॉपडाउन क्लिक पर खुला रखें</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
    <h2>ड्रॉपडाउन जो अंदर क्लिक करने पर खुला रहता है</h2>
    
    <!-- विधि 1: data-bs-auto-close="inside" (अनुशंसित) -->
    <div class="dropdown mb-3">
        <button class="btn btn-primary dropdown-toggle" type="button" 
                data-bs-toggle="dropdown" data-bs-auto-close="inside"
                aria-expanded="false">
            विधि 1: data-bs-auto-close="inside"
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">सामान्य लिंक</a></li>
            <li><a class="dropdown-item" href="#">एक और लिंक</a></li>
            <li><hr class="dropdown-divider"></li>
            <li>
                <label class="dropdown-item d-flex align-items-center gap-2 p-0">
                    <input type="checkbox" class="form-check-input"> चेकबॉक्स (क्लिक करने पर खुला रहेगा)
                </label>
            </li>
            <li>
                <input type="text" class="form-control mx-2 my-1" placeholder="इनपुट फील्ड" style="width: 200px;">
            </li>
        </ul>
    </div>
    
    <!-- विधि 2: stopPropagation (पुराने संस्करणों के लिए) -->
    <div class="dropdown">
        <button class="btn btn-success dropdown-toggle" type="button" 
                data-bs-toggle="dropdown" id="dropdown2" aria-expanded="false">
            विधि 2: stopPropagation
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">आइटम 1</a></li>
            <li><a class="dropdown-item" href="#">आइटम 2</a></li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // विधि 2 के लिए: ड्रॉपडाउन मेनू के अंदर क्लिक पर बबलिंग रोकें
        document.querySelectorAll('#dropdown2 + .dropdown-menu').forEach(menu => {
            menu.addEventListener('click', (e) => e.stopPropagation());
        });
    </script>
</body>
</html>

नेस्टेड ड्रॉपडाउन (सबमेनू)

<ul class="dropdown-menu">
    <li class="dropdown-submenu">
        <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">
            सबमेनू ▸
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">सब-आइटम 1</a></li>
            <li><a class="dropdown-item" href="#">सब-आइटम 2</a></li>
        </ul>
    </li>
</ul>

<style>
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.5rem;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
</style>