클릭하면 부트 스트랩 드롭 다운이 닫힘

클릭하면 부트 스트랩 드롭 다운이 닫힘

---

부트 스트랩 드롭 다운 안에 양식을 넣었지만 양식의 필드 중 하나를 클릭하면 드롭 다운이 사라집니다. 이 코드는 있지만 드롭 다운이 사라지는 것을 방지하기 위해 어디에 두어야할지 모르겠습니다.

$(function test() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});

누군가 내가 이것을 어디에 두어야하는지 말해 줄 수 있습니까? 부트 스트랩 드롭 다운에서 시도했지만 HTML 내에서 시도했지만 여전히 작동하지 않습니다.

---

이 예제를 사용하기 만하면됩니다.

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

도움이 되길 바랍니다. 감사.

---

드롭 다운 호출을 모두 생략 할 수 있으며, 부트 스트랩 드롭 다운은없이 작동합니다. 스크립트를 올바르게 래핑하고 있는지 확인하세요. 개인적으로는 페이지 본문에 배치하는 것을 선호하지만 페이지 헤더 나 본문에 포함 할 수 있습니다.

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>

---

모든 드롭 다운 메뉴가 아닌 일부 드롭 다운 메뉴 만 닫는 것을 중지하려면 ul 블록에 클래스를 추가하면됩니다.

<ul class="dropdown-menu keep-open-on-click">

그리고 다음 코드를 사용하십시오.

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});

---

답변이 수락 된 후 시간이 지났지 만 드롭 다운을 열어두고 싶다면 일종의 대화 상자처럼 작동한다면 가장 좋은 방법은 다음과 같습니다.

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

---

이벤트가 DOM 트리에서 버블 링되는 것을 중지해야합니다.

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

event.stopPropagation은 이벤트가 결국 부트 스트랩 숨김 메뉴에 의해 처리되는 노드에 도달하는 것을 방지합니다.

---

이것은 내 (부트 스트랩 토글로 간단한 링크를 여는 측면 사이드 바)에서 작동합니다.

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});

---

위의 답변에 감사드립니다. 드롭 다운 메뉴 아래의 하위 메뉴와 동일한 문제가 발생했습니다. 위의 솔루션을 사용하여이 문제도 해결할 수있었습니다.

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});

---

놓다

<script type="text/javascript">
    $('.dropdown-menu').click(function(e) {
          e.stopPropagation();
    });
</script>

원래 답변에서 모든 클래스를 제거하고 ".dropdown-menu"클래스를 넣으면 저에게 효과적이었습니다. 드롭 다운 메뉴 안에 입력 필드가 있습니다.

---

드롭 다운 위젯의 소스 하단을 보면 다음과 같이 표시됩니다.

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

So you have the following choices:

1. Simply wrap yor dropdown with form
2. Or you can add event listener for click event of .dropdown YOUR_SELECTOR

$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })

참고URL : https://stackoverflow.com/questions/10863821/bootstrap-dropdown-closing-when-clicked