내부 클릭시 드롭 다운 메뉴 닫기를 피하십시오

Twitter Bootstrap 드롭 다운 메뉴가 있습니다. 모든 Twitter Bootstrap 사용자가 알고 있듯이 클릭하면 드롭 다운 메뉴가 닫힙니다 (내부 클릭하더라도).

이를 피하기 위해 드롭 다운 메뉴에서 클릭 이벤트 핸들러를 쉽게 첨부하고 유명한을 추가 할 수 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()추가 된 기능이 있습니다.

최신 정보

그의 답변에 대한 로마 감사합니다 . 또한 아래에서 찾을 수 있는 답변을 찾았습니다 .

데이터 속성을 제거하고 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/

이것도 도움이 될 것입니다

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

부트 스트랩은 다음 기능을 제공합니다.

                 | 이 이벤트는 인스턴스 숨기기 메소드가 발생하면 즉시 시작됩니다.
hide.bs.dropdown | 호출되었습니다. 토글 앵커 요소는
                 | 이벤트의 relatedTarget 속성입니다.

따라서이 기능을 구현하면 드롭 다운을 닫을 수 없습니다.

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

가장 좋은 대답은 클래스 드롭 다운 메뉴 뒤에 양식 태그를 넣는 것입니다.

그래서 당신의 코드는

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>

나는 또한 해결책을 찾았다.

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

그것이 비슷한 솔루션을 찾는 사람에게 도움이되기를 바랍니다.

도와 주셔서 감사합니다.

도움이 될 수 있습니다.

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

이것은 모든 조건에서 작동 할 수 있습니다.

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/

나는이 간단한 것을 시도했고 그것은 매력처럼 작동했습니다.

드롭 다운 메뉴 요소를에서 <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>

나는 최근에 비슷한 문제를 가지고 데이터 속성을 제거 그것을 해결하기 위해 다양한 방법으로 시도했습니다 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가 있는 컨테이너 안에 요소 를 넣을 수 있습니다 .

부트 스트랩은 <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();
});

@Vartan의 답변을 Bootstrap 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>

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});

• 데모 : http://jsfiddle.net/4y8tLgcp/

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

가능한 한 똑똑하고 기능적으로 업데이트했습니다. 내비게이션 외부로 마우스를 가져 가면 내부에서 닫히고 열려 있습니다. 단순히 완벽합니다.

예를 들어 Bootstrap 4 Alpha에는이 메뉴 이벤트가 있습니다. 왜 사용하지 않습니까?

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});

드롭 다운에서 전파가 중단되는 것을 멈추고 회전식 자바 스크립트 메소드를 사용하여 회전식 컨트롤을 수동으로 다시 구현할 수 있습니다 .

$('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이 있습니다.

Angular2 부트 스트랩을 사용하면 대부분의 시나리오에서 비 입력을 사용할 수 있습니다.

<div dropdown autoClose="nonInput">

nonInput-(기본값) 클릭 한 요소가 입력 또는 텍스트 영역이 아닌 경우 요소를 클릭하면 드롭 다운이 자동으로 닫힙니다.

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

나는이 질문이 특별히 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>

[부트 스트랩 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;
  });
});

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

자바 스크립트 또는 jquery 코드를 작성하는 대신 (바퀴를 재발 명). 위 시나리오는 부트 스트랩 자동 닫기 옵션으로 관리 할 수 ​​있습니다. 자동 닫기 값 중 하나를 제공 할 수 있습니다 .

1. always-요소를 클릭하면 드롭 다운이 자동으로 닫힙니다 (기본값).

2. outsideClick-사용자가 드롭 다운 외부의 요소를 클릭 할 때만 드롭 다운을 자동으로 닫습니다.

3. disabled-자동 닫기를 비활성화합니다

다음 plunkr를 살펴보십시오.

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

세트

uib-dropdown auto-close="disabled" 

도움이 되었기를 바랍니다 :)

양식 사용을 제안하는 이전 답변이 이미 있지만 제공된 마크 업이 올바르지 않거나 이상적이지 않습니다. 다음은 가장 쉬운 해결책이며 자바 스크립트가 전혀 필요하지 않으며 드롭 다운을 해치지 않습니다. 부트 스트랩 4와 함께 작동합니다.

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

이것은 나를 도왔습니다.

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

이것이 누군가를 돕기를 바랍니다.

감사.

나를 위해 가장 간단한 해결책은 다음과 같습니다.

• keep-open드롭 다운 종료를 유발하지 않아야하는 요소에 클래스 추가
• 이 코드는 나머지를 수행합니다.

$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});

기본 부트 스트랩 탐색을 사용하려는 것처럼 솔루션이 작동하지 않는다는 것을 알았습니다. 이 문제에 대한 나의 해결책은 다음과 같습니다.

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });

에서 .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
    }
});

이전의 사례는 컨테이너 객체와 관련된 이벤트를 피했으며 이제 컨테이너는 클래스 keep-open을 상속하고 닫히기 전에 확인합니다.

나는 이것을 가지고 그것을했다 :

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

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

부트 스트랩 드롭 다운 외부에서 클릭 이벤트가 트리거 된 경우에만 드롭 다운을 닫으려면 다음과 같이하십시오.

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

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>

이벤트가 중단되므로 return false 또는 stopPropagation () 메소드를 사용하면 문제가 발생할 수 있습니다. 이 코드를 사용해보십시오. 작동합니다.

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

Bootstrap 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"?