วิธีซ่อนรายการแบบเลื่อนลงของ Twitter Bootstrap

สิ่งนี้เริ่มน่ารำคาญ - เมื่อฉันคลิกที่รายการในดรอปดาวน์ Bootstrap รายการแบบเลื่อนลงจะไม่ปิด ฉันได้ตั้งค่าให้เปิดไลท์บ็อกซ์ Facebox เมื่อคุณคลิกรายการแบบเลื่อนลง แต่เกิดปัญหาขึ้น

สิ่งที่ฉันได้ลอง

เมื่อรายการถูกคลิกฉันลองทำสิ่งนี้:

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

มันซ่อนมันไว้ แต่แล้วด้วยเหตุผลบางอย่างมันจะไม่เปิดขึ้นอีกครั้ง

อย่างที่คุณเห็นฉันต้องการให้เมนูแบบเลื่อนลงปิดจริงๆเพราะมันดูเส็งเคร็งเมื่อเปิดอยู่ (ส่วนใหญ่เป็นเพราะz-indexดรอปดาวน์สูงกว่าโอเวอร์เลย์กล่องโมดอลของ Facebox

ทำไมฉันไม่ใช้กล่องโมดอลในตัวของ Bootstrap

หากคุณสงสัยว่าทำไมฉันไม่ใช้กล่องโมดอลที่ดูดีใน Bootstrapนั่นเป็นเพราะ

1. ไม่มีวิธีโหลดเนื้อหาลงใน AJAX
2. คุณต้องพิมพ์ HTML ทุกครั้งสำหรับโมดอล ด้วย Facebox คุณสามารถทำได้ง่ายๆ:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. มันใช้ภาพเคลื่อนไหว CSS3 เพื่อทำให้เคลื่อนไหว (ซึ่งดูดีมาก) แต่ในเบราว์เซอร์ที่ไม่ใช่ CSS3 จะแสดงให้เห็นซึ่งดูไม่ดีเท่าไหร่ Facebox ใช้ JavaScript เพื่อทำให้เลือนหายไปจึงทำงานได้ในทุกเบราว์เซอร์

ลองสิ่งนี้:

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

สิ่งนี้อาจใช้ได้กับคุณ:

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

ลองใช้ตัวเลือกส่วนใหญ่จากที่นี่ แต่ไม่มีตัวเลือกใดที่เหมาะกับฉัน ( $('.dropdown.open').removeClass('open');ไม่ได้ซ่อนมัน แต่ถ้าคุณวางเมาส์ไว้ก่อนที่จะคลิกสิ่งอื่นก็จะปรากฏขึ้นอีกครั้ง

ดังนั้นฉันจึงทำมันโดยใช้ a $("body").trigger("click")

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

Bootstrap 4 (ตุลาคม 2018):

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

คุณต้อง$('.dropdown.open').removeClass('open');ลบบรรทัดที่สองซึ่งซ่อนเมนูแบบเลื่อนลงเท่านั้น

สามารถทำได้โดยไม่ต้องเขียนโค้ด JavaScript โดยเพิ่มแอตทริบิวต์data-toggle = "dropdown"ลงใน anchor tag ดังที่แสดงต่อไปนี้:

<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>

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน:

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

คำตอบที่เลือกไม่ได้ผลสำหรับฉัน แต่ฉันคิดว่าเป็นเพราะ Bootstrap เวอร์ชันใหม่กว่า ฉันเขียนสิ่งนี้:

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

หวังว่าจะเป็นประโยชน์กับคนอื่น ๆ ในอนาคต

ลองดูสิ!

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

หรือ

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

มันใช้ได้กับฉันเสมอ

ทำไมต้องใช้วิธีการของฉันเพราะถ้าผู้ใช้ออกจาก div metod นี้จะช่วยให้ผู้ใช้มีความล่าช้าก่อนที่เมนูย่อยจะหายไป มันเหมือนกับการใช้ปลั๊กอิน superfish

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);

    });

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

การอ่านเอกสารและการใช้ JavaScript สามารถทำได้โดยใช้วิธีการสลับ:

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

คุณสามารถอ่านได้ใน: http://getbootstrap.com/javascript/#dropdowns-methods

ลองเปิด HTML ด้วย Bootstrap Modal ฉันใช้รหัสนี้:

$(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>

นี่คือวิธีแก้ปัญหาของฉันเกี่ยวกับวิธีปิดเมนูแบบเลื่อนลงและสลับปุ่ม:

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

โดยที่ "this" คือคอนเทนเนอร์ส่วนกลางของกลุ่มปุ่ม

Bootstrap 4.1:

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

สิ่งนี้ใช้ได้ผลสำหรับฉันฉันมีแถบนำทางและเมนูแบบเลื่อนลงหลายรายการ

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

วิธีที่ง่ายที่สุดคือคุณเพิ่มป้ายกำกับซ่อน:

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

ทุกครั้งที่คุณต้องการซ่อนรายการแบบเลื่อนลงคุณจะโทรหา:

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

ไม่รู้ว่าสิ่งนี้จะช่วยใครได้บ้าง (อาจจะเจาะจงเกินไปสำหรับกรณีของฉันและไม่ใช่สำหรับคำถามนี้) แต่สำหรับฉันสิ่งนี้ได้ผล:

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

หลังจากคลิก:

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

ใช้ class = "dropdown-toggle" บนแท็ก anchor จากนั้นเมื่อคุณคลิกที่แท็ก anchor จะเป็นการปิดรายการแบบเลื่อนลง bootstrap

เฮ้เคล็ดลับ jQuery ง่ายๆนี้น่าจะช่วยได้

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

วิธีง่ายๆ:

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

คุณสามารถใช้รหัสนี้ในตัวจัดการเหตุการณ์ปัจจุบันของคุณ

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

ในสถานการณ์ของฉันฉันใช้เมื่อการโทร ajax เสร็จสมบูรณ์

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;
});

การเลือกตามแอตทริบิวต์เป็นวิธีที่ช้า นี่คือวิธีแก้ปัญหาที่รวดเร็วที่สุดในการซ่อนรายการแบบเลื่อนลงที่เปิดอยู่:

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

หรือใช้สิ่งต่อไปนี้หากเมนู. dropdown ไม่ใช่องค์ประกอบลูกถัดไป (ค้นหาตัวควบคุมแบบเลื่อนลงหลักที่ใกล้เคียงที่สุด):

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

อาจมีการเพิ่มในการย้อนหลัง (แม้ว่าคุณลักษณะนั้นจะไม่ได้รับการ บันทึกไว้แม้ใน Bootstrap 4.3.1) แต่คุณสามารถเรียกใช้ด้วยhideพารามิเตอร์ได้ อย่าลืมเรียกมันในองค์ประกอบตัวสลับ ชอบมาก:

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

showของหลักสูตรนี้ยังทำงานในสิ่งที่ตรงกันข้ามกับ