क्लिक पर बूटस्ट्रैप ड्रॉपडाउन खुला रखें

Question

मैं खरीदारी की शुरुआत के रूप में बूटस्ट्रैप ड्रॉपडाउन का उपयोग करता हूं। खरीदारी की टोकरी में एक 'निकालें उत्पाद' बटन (एक लिंक) है। यदि मैं इसे क्लिक करता हूं, तो मेरी खरीदारी की स्क्रिप्ट स्क्रिप्ट उत्पाद को हटा देती है, लेकिन मेनू दूर हो जाता है। क्या इसे रोकने का कोई तरीका है? मैंने e.startPropagation की कोशिश की, लेकिन यह काम नहीं किया:

<div id="shoppingcart" class="nav-collapse cart-collapse">
 <ul class="nav pull-right">
  <li class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
    &acirc;&sbquo;&not; 43,00</a>

    <ul class="dropdown-menu">
      <li class="nav-header">Pakketten</li>

      <li>
       <span class="quantity">1x</span>
       <span class="product-name">Test Product </span>
       <span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a>
        </span></li>

      <li><a href="#">Total: &euro; 43,00</a></li>

      <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

जैसा कि आप वर्ग तत्व को वर्ग के साथ देख सकते हैं = "ड्रॉपडाउन-टॉगल" ने इसे ड्रॉपडाउन बना दिया। एक और विचार यह था कि मैं इसे प्रोग्रामेटिक रूप से क्लिक करने पर फिर से खोल दूंगा। इसलिए अगर कोई मुझे बताए कि कैसे प्रोग्रामस्ट्रैप ड्रॉपडाउन खोलने के लिए प्रोग्राम किया जा सकता है, तो यह अच्छी तरह से मदद करेगा!

Comments

मैं देखता हूं कि आपके पास पहले से ही एक उत्तर है, लेकिन बहुत सरल तरीका है। बस मेनू की सामग्री को एक फॉर्म टैग में लपेटें। बस। इसलिए, इसके बजाय ul.dropdown-menu, उपयोग करें form.dropdown-menu>ul।

— rdumont

Answer 1

बटन पर प्रचार को हटाने की कोशिश करें जैसे:

$('.dropdown-menu a.removefromcart').click(function(e) {
    e.stopPropagation();
});

संपादित करें

यहाँ ऊपर समाधान के साथ टिप्पणियों से एक डेमो है:

http://jsfiddle.net/andresilich/E9mpu/

प्रासंगिक कोड:

जे एस

$(".removefromcart").on("click", function(e){
    var fadeDelete = $(this).parents('.product');
    $(fadeDelete).fadeOut(function() {
        $(this).remove();
    });

    e.stopPropagation();
});

एचटीएमएल

<div id="shoppingcart" class="nav-collapse cart-collapse">
 <ul class="nav pull-right">
  <li class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
    &acirc;&sbquo;&not; 43,00</a>

    <ul class="dropdown-menu">
      <li class="nav-header">Pakketten</li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">1</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">10</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">8</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">3</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">4</span></span>
        </li>
        <li class="divider"></li>
        <li><a href="#">Total: &euro; 43,00</a></li>
        <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

Comments

ठीक है, यह काम करता है, लेकिन अब निकालें बटन अब काम नहीं कर रहा है, जिसे मैं अपने स्वयं के बारे में सोच सकता था। तो शायद मुझे प्रोग्राम को फिर से खोलने की जरूरत है। किसी भी विचार कैसे करना है?

— मार्टन साइटेमा

@MartenSytema कि यह सब इस बात पर निर्भर करता है कि आप मेनू से उत्पादों को कैसे निकाल रहे हैं, लेकिन इसे उदाहरण के लिए लें: jsfiddle.net/andresilich/E9mpu , ध्यान दें कि मैंने .stopPropagation()हटाने की स्क्रिप्ट के साथ विधि को कैसे लागू किया ।

— एंड्रेस इलिच

मदद करने के लिए धन्यवाद! एकमात्र समस्या यह है कि मुझे क्लिक इवेंट को बांधने के लिए लाइव jquery विधि का उपयोग करने की आवश्यकता है, और jQuery के रूप में: क्योंकि .live () विधि उन घटनाओं को संभालती है जब वे दस्तावेज़ के शीर्ष पर प्रचारित हो जाते हैं, यह संभव नहीं है। लाइव घटनाओं का प्रचार बंद करो। लिंक

— मार्टन साइटेमा

@MartenSytema दोनों विधियाँ समान कार्य करती हैं। इसके अलावा, .live()jQuery के संस्करण 1.7 के रूप में पदावनत किया गया है।

— एंड्रेस इलिच

@MartenSytema का उल्लेख करना भूल गया, .live()द्वारा प्रतिस्थापित किया गया था .on()।

— एंड्रेस इलिच

Answer 2

यह उत्तर स्वीकृत उत्तर के लिए केवल एक संकेत है। इस प्रश्नोत्तर के लिए ओपी और एंड्रेस दोनों को धन्यवाद, इसने मेरी समस्या हल कर दी। हालांकि, बाद में, मुझे कुछ ऐसा चाहिए था जो मेरे ड्रॉपडाउन में गतिशील रूप से जोड़े गए आइटम के साथ काम करे। इस पर आने वाले किसी भी व्यक्ति को एक भिन्नता वाले एंड्रेस समाधान में दिलचस्पी हो सकती है जो प्रारंभिक तत्वों के साथ-साथ पृष्ठ लोड होने के बाद ड्रॉपडाउन में जोड़े गए दोनों तत्वों के साथ काम करता है:

$(function() {
    $("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
        e.stopPropagation();
    });
});

या, गतिशील रूप से बनाए गए ड्रॉपडाउन मेनू के लिए:

$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
    e.stopPropagation();
});

फिर अपनी स्थिति के आधार पर data-keepOpenOnClickकिसी भी <li>टैग या उसके बाल तत्वों में से किसी भी जगह पर विशेषता डालें । ईजी:

<ul class="dropdown-menu">
    <li>
        <-- EG 1: Do not close when clicking on the link -->
        <a href="#" data-keepOpenOnClick>
            ...
        </a>
    </li>
    <li>
        <-- EG 2: Do not close when clicking the checkbox -->
        <input type="checkbox" data-keepOpenOnClick> Pizza
    </li>

    <-- EG 3: Do not close when clicking the entire LI -->
    <li data-keepOpenOnClick>
        ...
    </li>
</ul>

Answer 3

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

तो यह मेरे लिए सबसे अच्छा काम किया:

<div class="dropdown">
    <!-- toggle button/link -->
    <div class="dropdown-menu">
        <form>
            <!-- content -->
        </form>
    </div>
</div>

Comments

पता नहीं कैसे लेकिन यह काम करता है और शीर्ष उत्तर होना चाहिए।

— दिमित्री मोस्ट्रे सिप

वास्तव में एक उत्तर देने के लिए बहुत बहुत धन्यवाद जो jQuery का उपयोग नहीं करता है! एक जादू की तरह काम करता है।

— म्लादेन रिस्टिक

Answer 4

संक्षेप में, आप यह कोशिश कर सकते हैं। यह मेरे लिए काम कर रहा है।

<span class="product-remove">
  <a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
  </span>

Answer 5

मेनू तब खुलता है जब आप मेनू को showकक्षा देते हैं , इसलिए आप बिना उपयोग किए फ़ंक्शन को लागू कर सकते हैं data-toggle="dropdown"।

<div class="dropdown">
  <button class="btn btn-secondary" type="button">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <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>
<div id="overlay"></div>

#overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

#overlay.show{
  display: block;
}

.dropdown-menu{
  z-index: 1001;
}

$('button, #overlay').on('click', function(){
  $('.dropdown-menu, #overlay').toggleClass('show')
})

कोडपेन में यह कोशिश करो ।

Answer 6

मैं एक समझौते के साथ एक ही समस्या थी / टॉगल उप-मेनू जो बूटस्ट्रैप 3 में एक ड्रॉपडाउन-मेनू के भीतर निहित था 3. ड्रॉप कोड को बंद करने से सभी टॉगल को रोकने के लिए स्रोत कोड से इस सिंटैक्स को उधार लिया गया:

$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', 
    function (e) { e.stopPropagation() }
);

आप [data-toggle="collapse"]फॉर्म को बंद करने के लिए जो कुछ भी करना चाहते हैं उसके साथ बदल सकते हैं, इसी तरह @DonamiteIsTnt ने ऐसा करने के लिए एक संपत्ति जोड़ी।

Answer 7

मैंने कोड की कुछ पंक्तियाँ लिखी हैं, जो इसे उतनी ही सटीक बनाती हैं, जितनी हमें इस पर नियंत्रण की आवश्यकता है

$(".dropdown_select").on('hidden.bs.dropdown', function () {
    if($(this).attr("keep-open") == "true") {
        $(this).addClass("open");
        $(this).removeAttr("keep-open");
    }
});

$(".dropdown_select ul li").bind("click", function (e) {
    // DO WHATEVER YOU WANT
    $(".dropdown_select").attr("keep-open", true);
});