ट्विटर बूटस्ट्रैप ड्रॉपडाउन को कैसे छिपाएं

Question 1

यह कष्टप्रद हो रहा है - जब मैं बूटस्ट्रैप ड्रॉपडाउन में किसी आइटम पर क्लिक करता हूं, तो ड्रॉपडाउन बंद नहीं होता है। जब आप ड्रॉपडाउन आइटम पर क्लिक करते हैं तो मैंने फेसबॉक्स लाइटबॉक्स खोलने के लिए इसे स्थापित किया है, लेकिन इसके साथ एक समस्या है।

यहां छवि विवरण दर्ज करें

मैंने क्या कोशिश की है

जब आइटम पर क्लिक किया जाता है, तो मैंने यह करने की कोशिश की:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

वह इसे छुपाता है, लेकिन फिर किसी कारण से यह फिर से नहीं खुलेगा।

जैसा कि आप देख सकते हैं कि मुझे वास्तव में ड्रॉपडाउन को बंद करने की आवश्यकता है, क्योंकि यह खुला रहने पर भद्दा लगता है (मुख्य रूप से क्योंकि z-indexड्रॉपडाउन की स्थिति फेसबॉक्स मोडल बॉक्स ओवरले से अधिक है।

मैं बूटस्ट्रैप के बिल्ट-इन मोडल बॉक्स का उपयोग क्यों नहीं कर रहा हूं

यदि आप सोच रहे हैं कि मैं बूटस्ट्रैप में निर्मित अच्छे दिखने वाले मोडल बॉक्स का उपयोग क्यों नहीं कर रहा हूं , तो यह है:

इसमें AJAX के साथ सामग्री लोड करने का कोई तरीका नहीं है।
आपको हर बार मोडल के लिए HTML टाइप करना होगा; फेसबॉक्स के साथ आप एक सरल कर सकते हैं:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
यह एनिमेट करने के लिए CSS3 के एनिमेशन का उपयोग करता है (जो देखने में बहुत अच्छा लगता है) लेकिन गैर- CSS3 ब्राउज़र में यह सिर्फ दिखाता है, जो कि अच्छा नहीं दिखता है; फेसबॉक्स जावास्क्रिप्ट का उपयोग करता है फीका करने के लिए तो यह सभी ब्राउज़रों में काम करता है।

Question 2

इसे इस्तेमाल करे:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

यह आपके लिए भी काम कर सकता है:

$('[data-toggle="dropdown"]').parent().removeClass('open');

Question 3

यहाँ से अधिकांश विकल्पों की कोशिश की, लेकिन उनमें से कोई भी वास्तव में मेरे लिए काम नहीं किया। ( $('.dropdown.open').removeClass('open');इसे छिपाया गया था, लेकिन यदि आप कुछ और क्लिक करने से पहले उस पर फिर से दिखाई देते हैं तो वह फिर से दिखाई देता है।

इसलिए मैं इसे एक whith कर एंडेट $("body").trigger("click")

Question 4

$('.open').removeClass('open');

बूटस्ट्रैप 4 (अक्टूबर 2018):

$('.show').removeClass('show');

Question 5

यह दिखाया जा सकता है कि एंकर टैग में विशेषता डेटा-टॉगल = "ड्रॉपडाउन" जोड़कर जावास्क्रिप्ट कोड लिखे बिना किया जा सकता है :

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

स्निपेट का विस्तार करें

Question 6

आपको केवल $('.dropdown.open').removeClass('open');दूसरी पंक्ति को हटाने की ज़रूरत है जो ड्रॉपडाउन मेनू को छिपाती है।

Question 7

इसी से मेरा काम बना है:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Question 8

चयनित उत्तर मेरे काम नहीं आया, लेकिन मैं सोच रहा हूं कि यह बूटस्ट्रैप के नए संस्करण के कारण है। मैंने यह लिखना समाप्त कर दिया:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

उम्मीद है कि भविष्य में किसी और के लिए उपयोगी हो।

Question 9

इसे इस्तेमाल करे!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

या

$(clicked_element).trigger("click");

यह हमेशा मेरे लिए काम करता है।

Question 10

मेरी पद्धति का उपयोग क्यों करें, क्योंकि यदि उपयोगकर्ता div से बाहर निकलता है, तो यह मेट्रो उपयोगकर्ता को सबमेनस के प्रसार से पहले एक निश्चित देरी की अनुमति देता है। यह सुपरफिशर प्लगइन का उपयोग करने जैसा है।

1) सबसे पहले डाउनलोड होवर आशय जावास्क्रिप्ट

यहाँ लिंक: होवर आशय जावास्क्रिप्ट

2) यहाँ निष्पादित करने के लिए मेरा कोड है

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

Question 11

$('.dropdown.open').removeClass('open');

Question 12

दस्तावेज़ीकरण पढ़ना और जावास्क्रिप्ट का उपयोग करना यह टॉगल विधि का उपयोग करके किया जा सकता है:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

आप इसके बारे में पढ़ सकते हैं: http://getbootstrap.com/javascript/#dropdowns-methods

Question 13

बूटस्ट्रैप मोडल के साथ HTML खोलने का प्रयास करें, मैं इस कोड का उपयोग करता हूं:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
});

और लिंक इस प्रकार है:

<a href="#my_page" data-toggle="modal">PAGE</a>

Question 14

बटन ड्रॉपडाउन को बंद करने और बटन को चालू करने के तरीके के बारे में यहां मेरा समाधान है:

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

जहां "यह" बटन समूह का एक वैश्विक कंटेनर है।

Question 15

बूटस्ट्रैप 4.1:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

Question 16

यह मेरे लिए काम करता है, मेरे पास एक नेवबार और कई पुलडाउन मेनू थे।

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

Question 17

ऐसा करने का सबसे आसान तरीका है: आप एक छिपा हुआ लेबल जोड़ें:

<label class="hide_dropdown" display='hide'></label>

फिर हर बार जब आप ड्रॉपडाउन छिपाना चाहते हैं, तो आप कॉल करते हैं:

$(".hide_dropdown").trigger('click');

Question 18

पता नहीं कि यह किसी की मदद करेगा (शायद यह मेरे मामले के लिए बहुत विशिष्ट है, और इस प्रश्न के लिए नहीं) लेकिन मेरे लिए यह काम किया है:

$('.input-group.open').removeClass('open');

Question 19

क्लिक के बाद:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Question 20

एंकर टैग पर क्लास = "ड्रॉपडाउन-टॉगल" का उपयोग करें, फिर जब आप एंकर टैग पर क्लिक करेंगे तो यह बूटस्ट्रैप ड्रॉपडाउन को बंद कर देगा।

Question 21

अरे यह सरल jQuery की चाल में मदद करनी चाहिए।

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

Question 22

आसान तरीका:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

Question 23

आप अपने वर्तमान ईवेंट हैंडलर में इस कोड का उपयोग कर सकते हैं

$('.in,.open').removeClass('in open');

अपने परिदृश्य में जब मैंने अजाक्स को पूरा करने के लिए इस्तेमाल किया था

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

Question 24

विशेषता द्वारा चयन करना धीमा तरीका है। यहाँ खोला ड्रॉपडाउन को छिपाने के लिए सबसे तेज़ समाधान है:

$(".dropdown-menu.show").parent().dropdown("toggle");

या निम्नलिखित का उपयोग करें, अगर .dropdown-menu अगले बच्चे तत्व नहीं है (निकटतम माता-पिता ड्रॉपडाउन नियंत्रण खोजें):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

Question 25

इसे रेट्रोस्पेक्ट में जोड़ा जा सकता है (हालाँकि, बूटस्ट्रैप 4.3.1 में भी यह सुविधा प्रलेखित नहीं है ), लेकिन आप इसे बस एक पैरामीटर के साथ कह सकते हैं । बस इसे भिखारी तत्व पर कॉल करना सुनिश्चित करें। इस तरह:hide

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

बेशक, यह भी उल्टा काम करता है show।