ड्रॉपडाउन मेनू को क्लिक के अंदर बंद करने से बचें

310

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

इससे बचने के लिए, मैं ड्रॉपडाउन मेनू पर क्लिक इवेंट हैंडलर को आसानी से संलग्न कर सकता हूं और केवल प्रसिद्ध जोड़ सकता हूं event.stopPropagation()।

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" 
             class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" 
             class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

यह आसान और एक बहुत ही सामान्य व्यवहार दिखता है, हालांकि, और चूंकि carousel-controls(साथ ही carousel indicators) घटना संचालकों को documentऑब्जेक्ट के लिए सौंप दिया जाता है, clickइन तत्वों ( प्रचलित / अगले नियंत्रण, ...) पर घटना को "अनदेखा" किया जाएगा।

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

ट्विटर बूटस्ट्रैप ड्रॉपडाउन hide/ hiddenघटनाओं पर भरोसा करना निम्नलिखित कारणों से समाधान नहीं है:

  • दोनों ईवेंट हैंडलर के लिए प्रदान की गई ईवेंट ऑब्जेक्ट क्लिक किए गए तत्व का संदर्भ नहीं देता है
  • मेरे पास ड्रॉपडाउन मेनू सामग्री पर नियंत्रण नहीं है इसलिए एक flagवर्ग या विशेषता जोड़ना संभव नहीं है

इस बेला सामान्य व्यवहार है और इस बेला है के साथ event.stopPropagation()जोड़ा गया।

अपडेट करें

रोमन को उनके जवाब के लिए धन्यवाद । मुझे एक जवाब भी मिला जो आप नीचे पा सकते हैं ।

javascript  jquery  html  twitter-bootstrap-3  drop-down-menu 
— php-देव
स्रोत
1. आपका jsfiddle काम नहीं कर रहा है। 2. वास्तव में आप क्या हासिल करना चाहते हैं?
— पउललेक्सांद्रु ०
1
@paulalexandru, अपडेटेड, ने दो फिडेल जोड़े। एक डिफ़ॉल्ट व्यवहार, और एक संशोधन के साथ। अगले और पिछले बटन पर, या संकेतकों पर क्लिक करने का प्रयास करें। पहले उदाहरण के लिए, मेनू छुपाता है और हिंडोला स्लाइड करता है। या दूसरा उदाहरण: मेनू खुला रहता है, लेकिन हिंडोला event propagationबंद होने के बाद से स्लाइड नहीं किया ।
— php-dev
@paulalexandru यह सही है?
— php-dev
@ php-dev: मैंने इसे चुनौती के लिए फिर से अपडेट किया है, अब यह सही है ... डेमो देखें।
— लुका फिलोसोफी

जवाबों:

373

डेटा विशेषता को हटाने data-toggle="dropdown"और ड्रॉपडाउन के खुले / बंद को लागू करना एक समाधान हो सकता है।

इस तरह ड्रॉपडाउन को खोलने / बंद करने के लिए लिंक पर क्लिक करके सबसे पहले:

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

और फिर इसे इस तरह से बंद करने के लिए ड्रॉपडाउन के बाहर के क्लिकों को सुनना:

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

यहाँ डेमो है: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

— रोमा
स्रोत
2
यह समाधान ठीक काम कर रहा है। यदि कोई अन्य उत्तर नहीं है, तो इनाम आपको दिया जाना चाहिए।
— php-dev
1
आपका समाधान काम कर रहा है, सामान्य और "लोकप्रिय" भी। इनाम को आपके जवाब से सम्मानित किया जाना चाहिए। मुझे एक जवाब भी मिला, इसे नीचे देखें;)
— php-dev
1
@ चिची ... बस पहले हैंडलर को इस तरह से संशोधित करें ... $ ('li.dropdown.mega-dropdown a')। '(' पर क्लिक करें ', function (घटना) {$ (' li.dropdown.mega-dropdown) .open ')। removeClass (' open '); $ (यह) .parent ()। toggleClass (' open ');});
— dsaket
63
यह पसंदीदा उत्तर हैक है। वाह!!! मेगा-ड्रॉपडाउन में क्लिक के अंदर रोकने के लिए यहां एक सरल BOOTSTRAP 4 अल्फा उत्तर है। // PREVENT INSIDE CLICK DROPDOWN $('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
— फ्रैंक थोनी
7
e.stopPropagation()सबसे अच्छा समाधान है।
— नचोलिब्रे
332

यह भी मदद करनी चाहिए

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});
— Arbejdsglæde
स्रोत
33
मुझे लगता है कि इस समस्या का सबसे सरल समाधान सुनिश्चित करना है। अंगूठे ऊपर - बस इस एक का परीक्षण किया और यह काम करता है!
— टॉरस्टेन बार्टेल
13
यह अब तक का सबसे अच्छा समाधान है।
— 9
3
यह सबसे आम समाधान है, लेकिन मेरी एक अलग आवश्यकता है। कृपया मेरे प्रश्न को ध्यान से पढ़ें :)
— php-dev
4
बस क्लिक पर मेनू खुला रखने के लिए सबसे अच्छा समाधान।
— मैट पियर्स
2
सबसे अच्छा समाधान वास्तव में। मैंने व्यक्तिगत रूप से उपयोग किया है '.dropdown-menu :not(.dropdown-item)'ताकि dropdown-itemपॉपअप बंद न हो, लेकिन क्लिक dropdown-headerनहीं करता है।
— बेंजामिन
41

बूटस्ट्रैप निम्नलिखित कार्य प्रदान करता है:

                 | इस घटना को तुरंत छिपा दिया जाता है जब छिपाने की विधि विधि
Hide.bs.dropdown | बुलाया गया। टॉगल एंकर तत्व के रूप में उपलब्ध है
                 | संबंधित घटना की संपत्ति।

इसलिए, इस फ़ंक्शन को लागू करना ड्रॉपडाउन को बंद करने से अक्षम करने में सक्षम होना चाहिए।

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});
— Vartan
स्रोत
2
@Vartan, इवेंट targetप्रॉपर्टी भी है li.dropdown, relatedTargetहै a.dropdown-toggle। तो आप hideईवेंट हैंडलर के भीतर क्लिक किए गए तत्व का संदर्भ नहीं दे सकते ।
— php-dev
2
hasClass एक क्लासनाम लेता है, सीएसएस चयनकर्ता नहीं। target.hasClass(".keepopen")होना चाहिए target.hasClass("keepopen")। अन्यथा कोड काम नहीं करेगा।
— ह्यूग गिन्नी
3
मैंने इंटरनेट को स्कैन किया है और यह अब तक का सबसे बुद्धिमान समाधान है, इस कारण से ... एमएसओटी अन्य तरीकों से एक दृष्टिकोण के लिए कॉल किया जाता है जो डिफ़ॉल्ट ईवेंट को रोकना या प्रचार को रोकना का उपयोग करता है। ये दृष्टिकोण बहुत खराब हैं क्योंकि वे ड्रॉप डाउन (यानी मेरे jquery मोबाइल फॉर्म तत्वों) के अंदर किसी भी अन्य ट्रिगर की गई घटनाओं को तोड़ देंगे। इस दृष्टिकोण का उपयोग करने से आप विशेष रूप से पहचान सकते हैं कि मेनू स्वयं बंद हो रहा है और आपको अकेले उस घटना पर कार्रवाई करने की अनुमति देता है। इस उत्तर के लिए बहुत से सितारों की आवश्यकता है ....
— वेबफिश
3
@webfish इंटरनेट स्कैन करने में आपको कितना समय लगा? (rofl)
— php-dev
2
शायद यह काम करता था .. लेकिन बूटस्ट्रैप 4 के साथ, e.target हमेशा ही ड्रॉपडाउन होता है। क्लिक किए गए लक्ष्य नहीं। यदि आप ड्रॉपडाउन के बाहर क्लिक करते हैं, तब भी e.target अभी भी ड्रॉपडाउन है। तो आप इस तरह की जाँच नहीं कर सकते। किसी को भी इस के आसपास एक रास्ता देखते हैं?
— फ्रेडअर्स
36

क्लास ड्रॉपडाउन-मेनू के बाद फॉर्म टैग लगाने के लिए सबसे अच्छा उत्तर है

तो आपका कोड है

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>
— ग्रेगरी बोवर्स
स्रोत
2
कार्यात्मक रूप से मेरे लिए शानदार काम किया, लेकिन स्टाइल को तोड़ दिया
— 2778
2
यह मेरे लिए सबसे तेज़ समाधान था
— जोनाथन मोरालेस वेलेज़
15
यह एक सबसे अच्छा जवाब नहीं है :) एक <li>तत्व एक तत्व के अंदर नहीं होना चाहिए <form> ।
— गीता जं
2
यह शब्दार्थिक रूप से सही समाधान नहीं है - एक उल का एकमात्र वैध बच्चा एक LI है - अगर कुछ भी फॉर्म टैग ली टैग के अंदर होना चाहिए - लेकिन वह वांछित कार्रवाई नहीं कर सकता है - या तो एक उल> फॉर्म> ली नहीं है सही मार्कअप
— gavgrif
2
इस तेजी से समाधान के लिए
— थैंक्स
27

मुझे भी एक हल मिला।

यह मानते हुए कि Twitter Bootstrap Componentsसंबंधित घटना संचालकों को documentऑब्जेक्ट में सौंपी गई है, मैं संलग्न हैंडलर को लूप करता हूं और जांचता हूं कि क्या वर्तमान क्लिक किया गया तत्व (या उसके माता-पिता में से कोई) एक प्रत्यायोजित घटना से संबंधित है।

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); //Always stop propagation
});

आशा है कि यह किसी भी एक समान समाधान की तलाश में मदद करता है।

आपकी मदद के लिए आप सभी को शुक्रिया।

— php-देव
स्रोत
1
वाह!!! पूरी तरह से काम किया! एक हफ्ते से परेशानी में था, मैं mCustomeScrollbar का उपयोग कर रहा हूं और ड्रॉप डाउन में स्क्रॉलबार पर क्लिक करने के बाद इसे बंद कर रहा था, आपकी स्क्रिप्ट ने काम किया और अब इसका काम ठीक है! बहुत - बहुत धन्यवाद।
— इरिनायोस
बहुत अच्छा काम करता है! कोई इसका विस्तार कैसे करता है, ताकि उपयोगकर्ता अभी भी "ESC" (या यहां तक ​​कि बाहर क्लिक करें) को डीडी को बंद करने के लिए दबा सके?
— चाचा इरो
2
@MaggewDotCom ESC कुंजी प्रेस को अभी भी काम करना चाहिए। बाहर क्लिक करने के लिए समान ...
— php-dev
इस समाधान का एकमात्र नकारात्मक पक्ष यह है कि यह नेस्टेड ड्रॉपडाउन की अनुमति नहीं देता (कहते हैं कि आपके पास ड्रॉपडाउन के अंदर एक ड्रॉपडाउन है)। क्या इस मामले के लिए कोई समाधान है?
— sdvnksv
26

यह मदद कर सकता है: 

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})
— Bawantha
स्रोत
यह निश्चित रूप से सबसे सरल / सर्वोत्तम उत्तर है यदि आप चाहते हैं कि उपयोगकर्ता ड्रॉपडाउन (जैसे रेडियो बटन) पर मौजूद यूआई तत्व के साथ बातचीत करे और जब वे विकल्पों को टॉगल करें तो मेनू को बंद न करें।
— रोब
22 
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

यह किसी भी स्थिति के लिए काम कर सकता है।

— टेरी लिन
स्रोत
यह सही उत्तर होना चाहिए क्योंकि यह चयनित उत्तर के बजाय कोड की कम पंक्तियों का उपयोग करता है
— मुहम्मद ओमर असलम
@MuhammadOmerAslam नाह! चूंकि यह मेरी आवश्यकता को पूरा नहीं करता है
— php-dev
12

jQuery:

<script>
  $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
    e.stopPropagation();
  });
</script>

HTML:

<div class="dropdown keep-inside-clicks-open">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
     Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

डेमो :

जेनेरिक: https://jsfiddle.net/kerryjohnson/omefq68b/1/

इस समाधान के साथ आपका डेमो: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

— केरी जॉनसन
स्रोत
9

मैंने इस सरल चीज़ की कोशिश की और यह एक आकर्षण की तरह काम करता है।

मैं बदल लटकती-मेनू से तत्व <div>को <form>और यह अच्छी तरह से काम किया।

<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
     </li>
     <li class="list-group-item"   >
     </li>
  </ul>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
      List Item 1
     </li>
     <li class="list-group-item"   >
         LI 2<input class="form-control" />
     </li>
     <li class="list-group-item"   >
        List Item 3
     </li>
  </ul>
</form>
स्निपेट का विस्तार करें

— TheVigilant
स्रोत
6

मुझे हाल ही में इसी तरह की समस्या हुई है और डेटा विशेषता को हटाने data-toggle="dropdown"और कॉलिंग के clickसाथ सुनने के साथ इसे हल करने के विभिन्न तरीकों की कोशिश की गई है event.stopPropagation()।

दूसरा तरीका अधिक बेहतर लगता है। इसके अलावा बूटस्ट्रैप डेवलपर्स इस तरह का उपयोग करते हैं। स्रोत फ़ाइल में मुझे ड्रॉपडाउन तत्वों का इनिशियलाइज़ेशन मिला:

// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);

तो, यह पंक्ति:

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

सुझाव देता है कि आप ड्रॉपडाउन मेनू को बंद करने से बचने के formलिए कंटेनर के अंदर एक तत्व डाल सकते हैं .dropdown।

— इल्या
स्रोत
6

बूटस्ट्रैप ने <form>ड्रॉपडाउन में टैग के समर्थन में स्वयं इस समस्या को हल किया है । उनका समाधान काफी महत्वपूर्ण है और आप इसे यहाँ पढ़ सकते हैं: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js

यह दस्तावेज़ तत्व में प्रसार को रोकने के लिए उबालता है और ऐसा केवल 'click.bs.dropdown.data-api'उस प्रकार की घटनाओं के लिए करता है जो चयनकर्ता से मेल खाते हैं '.dropdown .your-custom-class-for-keep-open-on-click-elements'।

या कोड में

$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
    event.stopPropagation();
});
— डैनियल श्लॉग
स्रोत
1
स्रोत के लिंक के लिए धन्यवाद, धन्यवाद। दूसरों के लिए यह सोचकर कि formउदाहरण के लिए दृष्टिकोण आपके लिए काम क्यों नहीं कर रहा है - मैं वर्ग का उपयोग कर रहा था dropleft, लेकिन dropdownफॉर्म-चयनकर्ता को मिलान करने के लिए भी इसकी आवश्यकता है।
— मार्क के कोवान
6

मैंने बूटस्ट्रैप 4.3 के साथ काम करने के लिए @ वर्तन के उत्तर को संशोधित किया। उसका समाधान अब नवीनतम संस्करण के साथ काम नहीं करता है क्योंकि targetसंपत्ति हमेशा ड्रॉपडाउन की जड़ को वापस कर देती divहै, जहां कोई भी क्लिक नहीं किया गया था।

यहाँ कोड है:

$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
  if (!e.clickEvent) {
    // There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked. 
    // What we usually want to happen in such situations is to hide the dropdown so we let it hide. 
    return true;
  }

  var target = $(e.clickEvent.target);

  return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});
<div class="dropdown dropdown-keep-open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
— कोनराड कालम्बा
स्रोत
oneline:$('.dropdown-keep-open').on('hide.bs.dropdown', ev => !(ev.clickEvent && $(ev.target).has(ev.clickEvent.target).length))
— Matveev डिमिट्री
@MatveevDmitriy मुझे क्षमा करें, लेकिन कोई नहीं, बस कोई भी इस एक लाइनर को नहीं पढ़ सकता है। इस तरह से कोड लिखना एक बुरा अभ्यास है।
— ViRuSTriNiTy
अंतिम पंक्ति का उपयोग करके सरल किया जा सकता है return !target.closest('.dropdown-keep-open').length)। उस ने कहा, यह एक महान समाधान है! इस समस्या को हल करने के लिए आवश्यक पाया।
— patrick3853
6 
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});
— waza123
स्रोत
सबसे पहले, आपके उत्तर के लिए धन्यवाद। सवाल का जवाब पहले से ही है। साथ ही, मुझे एक अलग आवश्यकता है जैसा कि सामान्य आवश्यकता की तुलना में प्रश्न में वर्णित है।
— php-dev
4 
$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
    var $a  = $(e.target), is_a = $a.is('.is_a');
    if($a.hasClass('dropdown-toggle')){   
        $('ul.dropdown-menu', this).toggle(!is_a);
        $a.toggleClass('is_a', !is_a);
    }
}).on('mouseleave', function(){
    $('ul.dropdown-menu',this).hide();
    $('.is_a', this).removeClass('is_a');
});

मैंने इसे एक बार फिर से अपडेट किया है कि यह सबसे स्मार्ट और कार्यात्मक हो। अब यह बंद हो जाता है जब आप नौसेना के बाहर मँडराते हैं, जब आप इसके अंदर होते हैं तो शेष खुले रहते हैं। बस एकदम सही।

— लुका फिलोसोफी
स्रोत
इसकी कमी के कारण आपका समाधान स्मार्ट है, हालांकि, कक्षा को जोड़ने के बाद show, ड्रॉपडाउन बाहर क्लिक पर बंद नहीं होता है, और हमें इससे पहले ड्रॉपडाउन-टॉगल पर क्लिक करने की आवश्यकता है ... +1 वैसे भी
— php-dev
मैंने इसे अपडेट किया है, डेमो देखें। यह सबसे अच्छा कारण है कि बॉडी क्लिक इवेंट के खिलाफ हर बार जांच न करें। प्रत्येक एकल नव तत्व के अंदर केवल तत्व को प्रभावित करें, इसके बाहर नहीं।
— लुका फिलोसोफी
मेरा समाधान भी bodyक्लिक घटना पर भरोसा नहीं करते ^ ^
— php-dev
हां, यह बॉडी क्लिक इवेंट में भाग के लिए रिले है, यह जांचने की कोशिश करता है कि बॉडी डेलिगेशन को किस तत्व से क्लिक किया गया है। $('body').on('click', function (e) {
— लुका फिलोसोफी
नाह! यह मेरा जवाब नहीं है। मेरा जवाब आखिरी पोस्ट किया गया है।
— php-dev
4

उदाहरण के लिए बूटस्ट्रैप 4 अल्फा में यह मेनू इवेंट है। उपयोग क्यों नहीं?

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});
— फ्रैंक थोनी
स्रोत
1
e.preventDefault();लिंक को ब्लॉक करता है, आप इसे छोड़ सकते हैं
— लंबे समय तक
@ चित्रकार तुम सही हो! e.preventDefault (); URL का अनुसरण करने से एक लिंक रोकें।
— फ्रैंक थोनी
3

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

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('a.left').click(function () {
    $('#carousel').carousel('prev');
});

$('a.right').click(function () {
    $('#carousel').carousel('next');
});

$('ol.carousel-indicators li').click(function (event) {
    var index = $(this).data("slide-to");
    $('#carousel').carousel(index);
});

यहाँ jsfiddle है ।

— नील
स्रोत
आपका उदाहरण ठीक काम करता है, लेकिन समस्या यह है कि ड्रॉपडाउन किसी भी सामग्री को पकड़ सकता है और न केवल छवियों हिंडोला ...
— php-dev
3

Angular2 बूटस्ट्रैप के साथ, आप अधिकांश परिदृश्यों के लिए nonInput का उपयोग कर सकते हैं:

<div dropdown autoClose="nonInput">

nonInput - (डिफ़ॉल्ट) स्वचालित रूप से ड्रॉपडाउन को बंद कर देता है जब इसके किसी भी तत्व को क्लिक किया जाता है - जब तक कि क्लिक किया गया तत्व इनपुट या टेक्स्टरी नहीं होता है।

https://valor-software.com/ng2-bootstrap/#/dropdowns

— निर सौरी
स्रोत
2

मुझे पता है कि यह प्रश्न विशेष रूप से jQuery के लिए था, लेकिन किसी के लिए भी AngularJS का उपयोग करने से यह समस्या हो सकती है कि आप एक निर्देश बना सकते हैं: 

angular.module('app').directive('dropdownPreventClose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(e) {
            e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
          });
        }
    };
});

फिर बस dropdown-prevent-closeअपने तत्व में वह विशेषता जोड़ें जो मेनू को बंद करने के लिए ट्रिगर कर रहा है, और इसे इसे रोकना चाहिए। मेरे लिए, यह एक ऐसा selectतत्व था जो मेनू को स्वचालित रूप से बंद कर देता था:

<div class="dropdown-menu">
  <select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
    <option value="">Select Me</option>
  </select>
</div>
— jtate
स्रोत
6
<div class="dropdown-menu" ng-click="$event.stopPropagation()">मेरे लिए 1.2.x में काम करता है
— dr3w
2

[बूटस्ट्रैप 4 अल्फा 6] [रेल] के लिए डेवलपर रेल, e.stopPropagation()के लिए अवांछनीय व्यवहार को बढ़ावा मिलेगा link_toसाथ data-methodनहीं के बराबर getहै, क्योंकि यह डिफ़ॉल्ट वापसी से सभी के रूप में आपके अनुरोध करेंगे get।

इस समस्या के समाधान के लिए, मैं इस समाधान का सुझाव देता हूं, जो सार्वभौमिक है

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

कोड स्निपेट दिखाएं

— जैकी टोंग
स्रोत
2

कुछ जावास्क्रिप्ट या jquery कोड लिखने के बजाय (पहिया को सुदृढ़ करना)। उपरोक्त परिदृश्य को बूटस्ट्रैप ऑटो-क्लोज विकल्प द्वारा प्रबंधित किया जा सकता है। आप ऑटो-क्लोज़ को मान प्रदान कर सकते हैं :

  1. हमेशा - (डिफ़ॉल्ट) स्वचालित रूप से ड्रॉपडाउन बंद हो जाता है जब इसके किसी भी तत्व को क्लिक किया जाता है।

  2. बाहर क्लिक करें - ड्रॉपडाउन स्वतः ही बंद हो जाता है जब उपयोगकर्ता ड्रॉपडाउन के बाहर किसी भी तत्व को क्लिक करता है।

  3. विकलांग - ऑटो को बंद कर देता है

निम्नलिखित प्लंकर पर एक नज़र डालें:

http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview

सेट

uib-dropdown auto-close="disabled"

उम्मीद है की यह मदद करेगा :)

— अश्वनी कुमार
स्रोत
5
यह स्पष्ट रूप से ध्यान दिया जाना चाहिए कि यह केवल उपयोग करने वाले लोगों के लिए अच्छा है ui-bootstrap, जो कि शायद इस सवाल को देखने वाले बहुत से लोगों के लिए नहीं है।
— केवलर
आपने अच्छी तरह से वर्णन किया है लेकिन मुझे लगता है कि आपको समाधान लिखना चाहिए uib-dropdown auto-close="outsideClick"। मेन्यू क्लोज ऑन क्लीक थोड़ा सा डिसफॉर्नेट है लेकिन मेन्यू क्लोज ऑन क्लॉक बाहर काफी परेशान करने वाला है।
— vusan
2

मुझे पता है कि पहले से ही एक फार्म का उपयोग करने का सुझाव देने वाला एक पिछला उत्तर है, लेकिन प्रदान किया गया मार्कअप सही / आदर्श नहीं है। यहां सबसे आसान उपाय है, किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है और यह आपके ड्रॉपडाउन को नहीं तोड़ता है। बूटस्ट्रैप 4 के साथ काम करता है।

<form class="dropdown-item"> <!-- Your elements go here --> </form>

— राडु सिओबानु
स्रोत
@RosdiKasim I यह बूटस्ट्रैप 4.0.0 के साथ एक वेबसाइट पर ठीक काम कर रहा है। 4.1 के साथ परीक्षण नहीं किया गया
— राडु सिओबानु
वास्तव में यह इस प्रकार होना चाहिए: <फॉर्म क्लास = "ड्रॉपडाउन ड्रॉपडाउन-आइटम">
— नासर सदराई
2

इससे मुझे मदद मिली,

$('.dropdown-menu').on('click', function (e) {
     if ($(this).parent().is(".open")) {
         var target = $(e.target);
         if (target.hasClass("keepopen") || target.parents(".keepopen").length){
                    return false; 
                }else{
                    return true;
                }
            }            
});

डाउन मेनू तत्व की जरूरत है आपका बूंद इस तरह हो सकता है, (कक्षा लिख लेना चाहिए dropdown-menuऔर keepopen।

<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">

उपर्युक्त कोड <body>वर्ग के साथ सट्टेबाजी तत्व के बजाय, पूरे पर चलने से रोकता है dropdown-menu।

आशा है कि यह किसी की मदद करता है।

धन्यवाद।

— अंजना सिल्वा
स्रोत
धन्यवाद अपडेट प्रति बूटस्ट्रैप 4 $ के रूप में ('। ड्रॉपडाउन-मेनू [डेटा-हैंडल्ड्रॉपडेकलोज़ = "सत्य"]])।) (' क्लिक ', फंक्शन (ई) {if ($ (यह) .परेंट ()) (") है। .show ")) {var target = $ (e.target); वापसी (target.hasClass (" CloseDropDown ") || target.parents (" (CloseDropDown "); लंबाई);}});
— तुलसीराम
1

मेरे लिए सबसे सरल कार्य समाधान है:

  • keep-openउन तत्वों को वर्ग जोड़ना जो ड्रॉपडाउन समापन का कारण नहीं होना चाहिए
  • और कोड का यह टुकड़ा बाकी है:
$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});
— जी-बी
स्रोत
क्या आप इस स्टैकओवरफ्लो को ठीक करने के लिए मेरी मदद कर सकते हैं
— झू
1

मुझे कोई भी समाधान नहीं मिला है क्योंकि मैं डिफ़ॉल्ट बूटस्ट्रैप नेवी का उपयोग करना चाहूंगा। यहाँ इस समस्या का समाधान है:

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });
— माइक
स्रोत
1

में .dropdownसामग्री डाल .keep-openतो जैसे किसी भी लेबल पर वर्ग:

$('.dropdown').on('click', function (e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    if (target.hasClass('keep-open')) {
        $(dropdown).addClass('keep-open');
    } else {
        $(dropdown).removeClass('keep-open');
    }
});

$(document).on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if ($(target).is('.keep-open')) {
        return false
    }
});

पिछले मामलों ने कंटेनर ऑब्जेक्ट्स से संबंधित घटनाओं से बचा था, अब कंटेनर क्लास कीप-ओपन और बंद होने से पहले जांच करता है।

— डिक्सन सैंटिएस्टेबान फेरिया
स्रोत
1

मैंने इसे इसके साथ किया:

$(element).on({
    'mouseenter': function(event) {
        $(event.currentTarget).data('mouseover', true);
    },
    'mouseleave': function(event) {
        $(event.currentTarget).data('mouseover', false);
    },
    'hide.bs.dropdown': function (event) {
        return !$(event.currentTarget).data('mouseover');
    }
});
— विलियम
स्रोत
0 
$(function() {
    $('.mega-dropdown').on('hide.bs.dropdown', function(e) {
        var $target = $(e.target);
        return !($target.hasClass("keep-open") || $target.parents(".keep-open").size() > 0);
    });

    $('.mega-dropdown > ul.dropdown-menu').on('mouseenter', function() {
        $(this).parent('li').addClass('keep-open')
    }).on('mouseleave', function() {
        $(this).parent('li').removeClass('keep-open')
    });
});
— दक्षिणी नौसेना कमान
स्रोत
0

ड्रॉपडाउन को बंद करने के लिए केवल अगर एक क्लिक इवेंट को बूटस्ट्रैप ड्रॉपडाउन के बाहर ट्रिगर किया गया था, तो यह मेरे लिए काम कर रहा है:

जेएस फाइल:

    $('.createNewElement').on('click.bs.dropdown.data-api', '.tags-btn-group.keep-open-dropdown', function (e) {
        var target = $(e.target);
        if (target.hasClass("dropdown-menu") || target.parents(".dropdown-menu").length) {
            e.stopPropagation();
        }
    });

HTML फ़ाइल:

<!-- button: -->
<div class="createNewElement">
                <div class="btn-group tags-btn-group keep-open-dropdown">

                    <div class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">OPEN DROPDOWN</div>

                    <ul class="dropdown-menu">
                        WHAT EVER YOU WANT HERE...
                    </ul>

                </div>
</div>
— डूडी
स्रोत
0

यदि आप गलत या वापसी रोक () विधि का उपयोग करते हैं तो आपको कुछ समस्याएँ हो सकती हैं क्योंकि आपकी घटनाएँ बाधित होंगी। इस कोड को आज़माएं, यह ठीक काम करता है:

$(function() {
    $('.dropdown').on("click", function (e) {
            $('.keep-open').removeClass("show");
    });
    $('.dropdown-toggle').on("click", function () {
            $('.keep-open').addClass("show");
    });

    $( ".closeDropdown" ).click(function() {
        $('.dropdown').closeDropdown();
    });
});
jQuery.fn.extend({
    closeDropdown: function() {
        this.addClass('show')
            .removeClass("keep-open")
            .click()
            .addClass("keep-open");
    }
  });

HTML में:

<div class="dropdown keep-open" id="search-menu" >
    <button  class="btn dropdown-toggle btn  btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-filter fa-fw"></i> 
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item" id="opt1" type="button">Option 1</button>
        <button class="dropdown-item" id="opt2" type="button">Option 2</button>
        <button type="button" class="btn btn-primary closeDropdown">Close</button>
    </div>
</div>

यदि आप ड्रॉपडाउन को बंद करना चाहते हैं:

`$('#search-menu').closeDropdown();`
— Hchab
स्रोत
0

बूटस्ट्रैप 4 में आप यह भी कर सकते हैं:

$('#dd-link').on('hide.bs.dropdown', onListHide)

function onListHide(e)
{
  if(e.clickEvent && $.contains(e.relatedTarget.parentNode, e.clickEvent.target)) {
  e.preventDefault()
  }
}

#dd-linkएंकर तत्व या बटन कहां है जिसके पास data-toggle="drowndown"संपत्ति है।

— डैनियल
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.