[jquery] Twitter 부트 스트랩 드롭 다운을 숨기는 방법

Program / 글쓴이

이것은 성가신 일입니다. 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');숨겨졌지만 다른 것을 클릭하기 전에 마우스를 올려 놓으면 다시 나타납니다.

그래서 나는 그것을 whith $("body").trigger("click")

답변

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

Bootstrap 4 (2018 년 10 월) :

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

답변

당신은 할 필요가 $('.dropdown.open').removeClass('open');드롭 다운 메뉴를 숨 깁니다 두 번째 줄을 제거합니다.

답변

이는 다음 과 같이 앵커 태그에 data-toggle = “dropdown” 속성을 추가하여 JavaScript 코드를 작성하지 않고도 수행 할 수 있습니다 .

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

앞으로 다른 사람에게 도움이되기를 바랍니다.