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

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

부트스트랩 드롭다운에서 항목을 클릭하면 드롭다운이 닫히지 않습니다.드롭다운 항목을 클릭하면 페이스박스 라이트 박스가 열리도록 설정했는데 문제가 있습니다.

---

내가 시도한 것

항목이 클릭되면 다음 작업을 시도했습니다.

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

그것은 그것을 숨기지만, 어떤 이유에서인지 그것은 다시 열리지 않습니다.

보시다시피 드롭다운이 닫히려면 정말 필요합니다. 왜냐하면 드롭다운이 열려 있을 때는 망가져 보이기 때문입니다(주로 그 이유는z-index의 드롭다운이 페이스박스 모달박스 오버레이보다 높습니다.

---

부트스트랩의 내장 모달박스를 사용하지 않는 이유

부트스트랩에 내장된 멋진 모달박스를 사용하지 않는 이유가 궁금하다면, 그 이유는 다음과 같습니다.

1. AJAX로 콘텐츠를 로드할 방법이 없습니다.
2. 대해 . 을 할 수 : 에 HTML 해야 해야 에 Facebox를 사용하면 간단한 작업을 수행할 수 있습니다.$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. CSS3 애니메이션을 사용하여 애니메이션을 생성하지만(아주 좋아 보입니다) CSS3가 아닌 브라우저의 경우에는 보여주기만 하는데, 이는 그렇게 보기 좋지 않습니다. 페이스박스는 자바스크립트를 사용하여 페이드 인을 사용하여 모든 브라우저에서 작동합니다.

시도해 보기:

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

이것은 또한 당신에게 효과적일 수 있습니다:

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

여기서 대부분의 옵션을 시도해 보았지만 그 중 아무 것도 나에게 효과가 없었습니다.(더$('.dropdown.open').removeClass('open');숨겼지만, 다른 걸 클릭하기 전에 생각해보면 다시 나타난답니다.

그래서 나는 결국 그것을 하기 시작했습니다.$("body").trigger("click")

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

부트스트랩 4 (2018년 10월):

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

아래와 같이 앵커 태그에 속성 data-lot="lots"를 추가하여 자바스크립트 코드를 작성하지 않고 수행할 수 있습니다.

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

당신은 단지 하기만 하면 됩니다.$('.dropdown.open').removeClass('open');드롭다운 메뉴를 숨기는 두 번째 줄을 제거합니다.

이것이 제게 효과가 있었던 것입니다.

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

이거 먹어봐요.

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

오어

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

저한테는 항상 효과가 있어요.

선택한 답변은 제게 맞지 않았지만, 새로운 버전의 부트스트랩 때문인 것 같습니다.저는 결국 이렇게 썼습니다.

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

그것이 미래에 다른 누군가에게 도움이 되기를 바랍니다.

사용자가 div에서 나오면 하위 메뉴가 사라지기 전에 사용자가 일정한 지연을 허용하기 때문에 내 메소드를 사용하는 이유는 무엇입니까?마치 슈퍼피쉬 플러그인을 사용하는 것과 같습니다.

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

문서를 읽고 자바스크립트를 사용하면 토글 방법을 사용할 수 있습니다.

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

http://getbootstrap.com/javascript/ #https-https-https-https-https에서 읽을 수 있습니다.

돌이켜보면 추가되었을 수도 있지만(부트스트랩 4.3.1에도 문서화되어 있지는 않지만), 단순히 다음과 같이 부를 수 있습니다.hide매개 변수.토글러 요소에서 꼭 호출하세요.이와 같습니다.

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

물론, 이것은 또한 그와 반대로 작용합니다.show.

부트스트랩 모달로 HTML을 열려고 하면 다음 코드를 사용합니다.

$(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"는 단추 그룹의 전역 컨테이너입니다.

부트스트랩 4.1:

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

속성별로 선택하는 것은 느린 방법입니다.열린 드롭다운을 숨길 수 있는 가장 빠른 솔루션은 다음과 같습니다.

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

또는 다음 하위 요소가 아닌 경우 다음을 사용합니다(가장 가까운 상위 드롭다운 컨트롤 찾기).

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

이것은 나에게 효과가 있었고, 나는 navbar와 몇 가지 풀다운 메뉴를 가지고 있었습니다.

$(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="float-float"을 사용한 다음 앵커 태그를 클릭하면 부트스트랩 드롭다운이 닫힙니다.

이 간단한 jQuery 트릭이 도움이 될 것입니다.

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

가장 쉬운 방법:

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

현재 이벤트 핸들러에서 이 코드를 사용할 수 있습니다.

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

나의 시나리오에서 나는 ax call complete 할 때 사용했습니다.

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

언급URL : https://stackoverflow.com/questions/10941540/how-to-hide-twitter-bootstrap-dropdown