Tránh đóng menu thả xuống khi nhấp vào bên trong

327
php-dev 2014-08-02 11:59.

Tôi có một menu thả xuống Twitter Bootstrap. Như tất cả người dùng Twitter Bootstrap đều biết, menu thả xuống sẽ đóng khi nhấp chuột (thậm chí nhấp vào bên trong nó).

Để tránh điều này, tôi có thể dễ dàng đính kèm trình xử lý sự kiện nhấp chuột trên trình đơn thả xuống và chỉ cần thêm nổi tiếng 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>

Tuy nhiên, điều này trông có vẻ dễ dàng và là một hành vi rất phổ biến, và vì carousel-controls(cũng như carousel indicators) các trình xử lý sự kiện được ủy quyền cho documentđối tượng, clicksự kiện trên các phần tử này ( điều khiển trước / sau , ...) sẽ bị “bỏ qua”.

$('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();
});

Dựa vào trình đơn thả xuống hide/ hiddensự kiện Twitter Bootstrap không phải là giải pháp vì những lý do sau:

  • Đối tượng sự kiện đã cung cấp cho cả hai trình xử lý sự kiện không cung cấp tham chiếu đến phần tử được nhấp
  • Tôi không có quyền kiểm soát nội dung menu thả xuống nên không thể thêm flaglớp hoặc thuộc tính

Fiddle này là hành vi bình thường và fiddle này được event.stopPropagation()thêm vào.

Cập nhật

Cảm ơn Roman vì câu trả lời của anh ấy . Tôi cũng tìm thấy một câu trả lời mà bạn có thể tìm thấy bên dưới .

30 answers

388
Roma 2014-08-08 18:32.

Xóa thuộc tính dữ liệu data-toggle="dropdown"và thực hiện mở / đóng menu thả xuống có thể là một giải pháp.

Đầu tiên bằng cách xử lý nhấp chuột vào liên kết để mở / đóng trình đơn thả xuống như sau:

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

và sau đó lắng nghe các nhấp chuột bên ngoài menu thả xuống để đóng nó như thế này:

$('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');
    }
});

Đây là bản demo: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

360
Arbejdsglæde 2015-10-04 02:44.

Điều này cũng sẽ giúp

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});
43
Vartan 2014-08-02 12:06.

Bootstrap cung cấp chức năng sau:

                 | Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn phiên bản
hide.bs.dropdown | đã được gọi. Phần tử neo chuyển đổi có sẵn dưới dạng
                 | thuộc tính RelatedTarget của sự kiện.

Do đó, việc triển khai chức năng này sẽ có thể tắt tính năng đóng trình đơn thả xuống.

$('#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;
    }
});
37
Gregory Bowers 2015-12-11 18:43.

Câu trả lời tuyệt đối tốt nhất là đặt một thẻ biểu mẫu sau menu thả xuống của lớp

vì vậy mã của bạn là

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>
29
Bawantha 2018-04-20 11:18.

Điều này có thể giúp:

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})
28
php-dev 2014-08-12 11:50.

Tôi cũng đã tìm ra một giải pháp.

Giả sử rằng các Twitter Bootstrap Componentstrình xử lý sự kiện liên quan được ủy quyền cho documentđối tượng, tôi lặp lại các trình xử lý đính kèm và kiểm tra xem phần tử được nhấp hiện tại (hoặc một trong các phần tử cha của nó) có bị sự kiện được ủy quyền quan tâm hay không.

$('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
});

Hy vọng nó sẽ giúp bất kỳ ai đang tìm kiếm một giải pháp tương tự.

Cảm ơn mọi sự giúp đỡ của bạn.

22
Terry Lin 2016-12-05 03:51.
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

Điều này có thể hoạt động cho bất kỳ điều kiện nào.

12
Kerry Johnson 2017-04-22 09:34.

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>

Demo :

Chung: https://jsfiddle.net/kerryjohnson/omefq68b/1/

Bản demo của bạn với giải pháp này: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

10
TheVigilant 2019-09-22 07:26.

Tôi đã thử điều đơn giản này và nó hoạt động như một cái duyên.

Tôi đã thay đổi phần tử menu thả xuống từ <div>thành <form>và nó hoạt động tốt.

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

8
Konrad Kalemba 2019-03-31 11:22.

Tôi đã sửa đổi câu trả lời của @ Vartan để làm cho nó hoạt động với Bootstrap 4.3. Giải pháp của anh ấy không hoạt động nữa với phiên bản mới nhất vì thuộc targettính luôn trả về gốc của trình đơn thả xuống cho divdù nhấp chuột được đặt ở đâu.

Đây là mã:

$('.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>
8
waza123 2018-07-30 04:02.
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});
6
Ilya 2015-11-28 07:51.

Gần đây, tôi đã gặp sự cố tương tự và đã thử các cách khác nhau để giải quyết nó bằng cách xóa thuộc tính dữ liệu data-toggle="dropdown"và nghe clickbằng event.stopPropagation()gọi.

Cách thứ hai có vẻ thích hợp hơn. Ngoài ra các nhà phát triển Bootstrap cũng sử dụng cách này. Trong tệp nguồn, tôi đã tìm thấy quá trình khởi tạo các phần tử thả xuống:

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

Vì vậy, dòng này:

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

gợi ý rằng bạn có thể đặt một formphần tử bên trong vùng chứa với lớp .dropdownđể tránh đóng menu thả xuống.

6
Daniel Schlaug 2018-10-08 09:54.

Bootstrap đã tự giải quyết vấn đề này bằng cách hỗ trợ <form>các thẻ trong trình đơn thả xuống. Giải pháp của họ khá dễ hiểu và bạn có thể đọc nó tại đây: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js

Nó giúp ngăn chặn sự lan truyền ở phần tử tài liệu và chỉ làm như vậy đối với các sự kiện thuộc loại 'click.bs.dropdown.data-api'khớp với bộ chọn '.dropdown .your-custom-class-for-keep-open-on-click-elements'.

Hoặc trong mã

$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
    event.stopPropagation();
});
5
Ramast 2019-11-30 11:05.

Bạn có thể chỉ cần thực hiện event.stopPropagationsự kiện nhấp chuột của chính các liên kết. Một cái gì đó như thế này.

    $(".dropdown-menu a").click((event) => {
         event.stopPropagation()
         let url = event.target.href
         //Do something with the url or any other logic you wish
    })

Chỉnh sửa: Nếu ai đó đã thấy câu trả lời này và đang sử dụng phản ứng, nó sẽ không hoạt động. React xử lý các sự kiện javascript theo cách khác nhau và vào thời điểm trình xử lý sự kiện phản ứng của bạn đang được gọi, sự kiện đã được kích hoạt và truyền bá. Để khắc phục điều đó bạn nên đính kèm sự kiện theo cách thủ công như vậy

handleMenuClick(event) {
   event.stopPropagation()
   let menu_item = event.target
   //implement your logic here.
}
componentDidMount() {
    document.getElementsByClassName("dropdown-menu")[0].addEventListener(
        "click", this.handleMenuClick.bind(this), false)
   }
}
4
Luca Filosofi 2014-08-12 10:41.
$('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');
});

tôi đã cập nhật nó một lần nữa để trở nên thông minh và đầy đủ chức năng nhất có thể. bây giờ nó đóng khi bạn di chuột bên ngoài điều hướng, vẫn mở khi bạn ở bên trong nó. đơn giản là hoàn hảo.

4
Frank Thoeny 2016-03-29 17:55.

Chẳng hạn như Bootstrap 4 Alpha có Sự kiện Menu này. Tại sao không sử dụng?

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});
3
Neil 2014-08-12 09:56.

Bạn có thể ngừng nhấp vào danh sách thả xuống để lan truyền và sau đó thực hiện lại thủ công các điều khiển băng chuyền bằng các phương pháp javascript băng chuyền .

$('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);
});

Đây là jsfiddle .

2
jtate 2016-06-15 06:26.

Tôi biết câu hỏi này dành riêng cho jQuery, nhưng đối với bất kỳ ai sử dụng AngularJS gặp sự cố này, bạn có thể tạo một chỉ thị xử lý điều này:

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

Sau đó, chỉ cần thêm thuộc tính dropdown-prevent-closevào phần tử của bạn đang kích hoạt đóng menu và nó sẽ ngăn chặn nó. Đối với tôi, nó là một selectphần tử tự động đóng menu:

<div class="dropdown-menu">
  <select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
    <option value="">Select Me</option>
  </select>
</div>
2
Nir Soudry 2016-08-15 21:13.

Với Angular2 Bootstrap, bạn có thể sử dụng nonInput cho hầu hết các trường hợp:

<div dropdown autoClose="nonInput">

nonInput - (mặc định) tự động đóng menu thả xuống khi bất kỳ phần tử nào của nó được nhấp vào - miễn là phần tử được nhấp không phải là đầu vào hoặc vùng văn bản.

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

2
Jacky Tong 2017-03-29 21:53.

[Bootstrap 4 Alpha 6] [Rails] Đối với nhà phát triển rails, e.stopPropagation()sẽ dẫn đến hành vi không mong muốn link_tovới data-methodkhông bằng getvì theo mặc định, nó sẽ trả về tất cả yêu cầu của bạn dưới dạng get.

Để khắc phục sự cố này, tôi đề xuất giải pháp này, phổ biến

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

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

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

2
ashwaniKumar 2017-06-08 01:03.

Thay vì viết một số javascript hoặc mã jquery (phát minh lại bánh xe). Tình huống trên có thể được quản lý bằng tùy chọn tự động đóng bootstrap. Bạn có thể cung cấp một trong các giá trị để tự động đóng :

  1. luôn - (Mặc định) tự động đóng menu thả xuống khi bất kỳ phần tử nào của nó được nhấp vào.

  2. externalClick - chỉ tự động đóng menu thả xuống khi người dùng nhấp vào bất kỳ phần tử nào bên ngoài menu thả xuống.

  3. vô hiệu hóa - tắt tự động đóng

Hãy xem plunkr sau:

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

Bộ

uib-dropdown auto-close="disabled" 

Hi vọng điêu nay co ich :)

2
Radu Ciobanu 2018-03-18 21:29.

Tôi biết đã có một câu trả lời trước đó đề nghị sử dụng một biểu mẫu nhưng đánh dấu được cung cấp không đúng / lý tưởng. Đây là giải pháp dễ dàng nhất, không cần javascript và nó không phá vỡ trình đơn thả xuống của bạn. Hoạt động với Bootstrap 4.

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

2
Anjana Silva 2019-02-23 05:12.

Điều này đã giúp tôi,

$('.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;
                }
            }            
});

Phần tử trình đơn thả xuống của bạn cần phải như thế này, (hãy lưu ý các lớp dropdown-menukeepopen.

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

Đoạn mã trên ngăn cản việc cung cấp toàn bộ <body>, thay vào đó là phần tử đặc trưng với lớp dropdown-menu.

Hy vọng điều này sẽ giúp ai đó.

Cảm ơn.

1
Gee-Bee 2016-07-15 01:25.

Giải pháp làm việc đơn giản nhất đối với tôi là:

  • thêm keep-openlớp vào các phần tử không gây ra đóng trình đơn thả xuống
  • và đoạn mã này thực hiện phần còn lại:
$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});
1
Mike 2017-01-04 13:14.

Tôi không tìm thấy giải pháp nào hoạt động như tôi muốn bằng cách sử dụng bootstrap nav mặc định. Đây là giải pháp của tôi cho vấn đề này:

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });
1
Dixán Santiesteban Feria 2017-09-07 03:21.

Trong .dropdownnội dung, hãy đặt .keep-openlớp trên bất kỳ nhãn nào như vậy:

$('.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
    }
});

Các trường hợp trước đã tránh các sự kiện liên quan đến các đối tượng vùng chứa, bây giờ vùng chứa kế thừa lớp keep-open và kiểm tra trước khi bị đóng.

1
William 2019-02-07 09:12.

Tôi đã làm điều đó với cái này:

$(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');
    }
});
1
devGarber 2019-07-18 02:46.

Bạn có thể đi qua đoạn mã dưới đây để giải quyết vấn đề này.

$(document).on('click.bs.dropdown.data-api', '.keep_it_open', function (e) {
  e.stopPropagation();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="dropdown keep_it_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>

0
SNC 2016-03-05 05:57.
$(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
Dudi 2017-12-29 06:02.

Để đóng menu thả xuống chỉ khi một sự kiện nhấp chuột được kích hoạt bên ngoài menu thả xuống bootstrap, đây là điều phù hợp với tôi:

Tệp JS:

    $('.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();
        }
    });

Tệp 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>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Trump và Giám đốc điều hành GM Mary Barra vào năm 2017. Kể từ khi tin tức nổ ra ngày hôm qua rằng General Motors đang cắt giảm việc làm ở Bắc Mỹ để chuẩn bị cho tương lai điện / xe tự hành / khủng khiếp có thể xảy ra của chúng tôi, gần như tất cả mọi người đã tự hỏi: Tổng thống Trump, người đã vận động tranh cử trên một nền tảng sẽ như thế nào của việc mang lại và duy trì việc làm ô tô của Mỹ, phải nói gì về điều này? Bây giờ chúng ta biết.

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bethesda cho biết ngày hôm nay trên Reddit, Fallout 76 sẽ có một bản vá lớn khác vào ngày 4 tháng 12, sẽ bắt đầu cố gắng khắc phục một số vấn đề lớn hơn của trò chơi. Ngoài ra, công ty cho biết họ có kế hoạch giao tiếp nhiều hơn trong tương lai về những gì nhóm Fallout 76 đang làm việc và khi nào các bản cập nhật mới cho trò chơi sẽ ra mắt.

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Bạn có biết rằng một trong sáu bệnh nhân ở bệnh viện ở Hoa Kỳ được điều trị tại một cơ sở Công giáo? Và bạn có biết rằng quyền sở hữu của Công giáo hạn chế sâu sắc việc thiết lập các thủ tục y tế có thể được thực hiện trong các bệnh viện này, rõ ràng nhất là khi nói đến chăm sóc sức khỏe sinh sản? Bây giờ NPR báo cáo rằng sự gia tăng của các bệnh viện thuộc Công giáo đang gây khó khăn hơn cho các bác sĩ — những người bị cấm bởi các quy định do Hoa Kỳ viết.

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Đường chân trời San Francisco bị che khuất bởi khói và khói mù do cháy rừng phía sau Đảo Alcatraz, Thứ Tư, ngày 14 tháng 11 năm 2018, ở San Francisco.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language