부트 스트랩 닫기 반응 형 메뉴 "클릭시"

Question 1

"PRODUCTS"에서 흰색 div를 위로 슬라이드합니다 (첨부 참조). 반응 형 (모바일 및 태블릿) 상태에서 반응 형 탐색 메뉴를 자동으로 닫고 흰색 막대 만 표시하고 싶습니다.

나는 시도했다 :

$('.btn-navbar').click();

또한 시도 :

$('.nav-collapse').toggle();

그리고 그것은 작동합니다. 그러나 데스크톱 크기에서는 메뉴가 1 초 동안 축소되는 펑키 한 작업을 수행하기도합니다.

어떤 아이디어?

여기에 이미지 설명 입력

Question 2

애니메이션 작업이 가능합니다!

HTML 메뉴 :

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

탐색의 모든 요소에 대한 클릭 이벤트를 축소 메뉴에 바인딩 (부트 스트랩 축소 플러그인) :

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

편집 좀 더 일반적으로 만들기 위해 다음 코드 스 니펫을 사용할 수 있습니다.

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Question 3

부트 스트랩 축소 옵션에 이미 포함 된 항목에 추가 자바 스크립트를 추가 할 필요가 없습니다. 대신 navbar-toggle 버튼과 마찬가지로 메뉴 목록 항목에 데이터 토글 및 데이터 대상 선택기를 포함하십시오. 따라서 제품 메뉴 항목의 경우 다음과 같습니다.

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

그런 다음 각 메뉴 항목에 대해 데이터 토글 및 데이터 대상 선택기를 반복해야합니다.

편집하다!!! 오버플로 문제를 해결하고이 수정에서 깜박임을 수정하기 위해이 문제를 해결하고 여전히 추가 자바 스크립트가없는 코드를 더 추가합니다. 다음은 새로운 코드입니다.

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

여기가 직장입니다 http://jsfiddle.net/jaketaylor/84mqazgq/

이렇게하면 토글 및 대상 선택기가 화면 크기에 맞게 만들어지고 더 큰 메뉴에서 결함이 제거됩니다. 여전히 결함이있는 사람이있는 경우 알려 주시면 해결 방법을 찾도록하겠습니다. 감사

편집 : 부트 스트랩 v4.1.3에서는 표시 / 숨겨진 클래스를 사용할 수 없습니다. 대신에 hidden-xs사용 d-none d-sm-block하고 대신에 visible-xs사용 d-block d-sm-none.

Question 4

당신은 공학을 다한 것 같아요 ..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

편집 : 하위 메뉴를 관리하려면 토글 앵커에 드롭 다운 토글 클래스가 있는지 확인하십시오.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

편집 2 : 전화 터치에 대한 지원을 추가합니다.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

Question 5

추가 JavaScript없이 부트 스트랩의 축소 토글을 활용하는 Jake Taylor의 아이디어가 정말 마음에 들었습니다. 클래스 data-target를 포함하도록 선택기를 약간 수정하여 메뉴가 축소 모드에 있지 않을 때 나타나는 "깜박임"문제를 해결할 수 있습니다 in. 따라서 다음과 같이 보입니다.

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

중첩 된 드롭 다운 / 메뉴로 테스트하지 않았으므로 YMMV.

Question 6

완료하기 위해 Bootstrap 4.0.0-beta에서 .show를 사용하는 것이 저에게 효과적 이었습니다 ...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

Question 7

Bootstrap 예제와 모든 것을 기반으로 탐색 영역을 정의하는 이와 같은 줄이 있다고 가정합니다.

<div class="nav-collapse collapse" >

MENU 버튼과 같이 속성을 추가하기 만하면됩니다.

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

나는 또한 추가하고 <body>일했습니다. 내가 프로파일 링했다고 말할 수는 없지만 메뉴를 열기 위해 UI의 임의의 지점을 클릭하기 전까지는 나에게 대접처럼 보입니다. 그렇게 좋지는 않습니다.

DK

Question 8

이것은 작동하지만 애니메이션이 적용되지는 않습니다.

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

Question 9

HTML에서 나는의 클래스 추가 탐색 링크를 받는 각 탐색 링크의 태그입니다.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

Question 10

이 솔루션은 데스크톱 및 모바일에서 잘 작동합니다.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

Question 11

user1040259의 솔루션을 설명하기 위해이 코드를 $ (document) .ready (function () {});

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

그들이 언급했듯이 이것은 이동을 애니메이션하지 않지만 항목 선택시 탐색 모음을 닫습니다.

Question 12

AngularJS 및 Angular UI Router를 사용하는 사람들을 위해 여기에 내 솔루션이 있습니다 (mollwe의 토글 사용). 여기서 ".navbar-main-collapse"는 내 "데이터 대상"입니다.

지시문 생성 :

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

사용 지침 :

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

Question 13

이것은 트릭을 할 것입니다.

bootstrap.js가 필요합니다.

예 => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

이것은 탐색 메뉴 태그에 'data-toggle = "collapse"'및 'href = "yournavigationID"'속성을 추가하는 것과 동일합니다.

Question 14

두 가지 개선 사항을 추가했지만 mollwe 기능을 사용하고 있습니다.

a) 클릭 한 링크가 접힌 경우 (다른 링크 포함) 드롭 다운 닫기를 피하십시오.

b) 보이는 웹 콘텐츠를 클릭하는 경우 드롭 다운도 숨 깁니다.

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

Question 15

최신 스레드는 아니지만 동일한 문제에 대한 해결책을 찾고 하나 (다른 것의 혼합)를 찾았습니다.

NavButton을주었습니다.

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

다음과 같은 ID / 식별자 :

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

최고의 "아이디어"는 아니지만 : 저에게 적합합니다! 이제 다음과 같이 버튼 (jquery 사용)의 가시성을 확인할 수 있습니다.

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(참고 : 이것은 코드 일뿐입니다! 내 Nav 링크에서 "onclick"이벤트를 사용했습니다! (AJAX Reguest 시작)

결과는 다음과 같습니다. 버튼이 "보이는"경우 "클릭"되었습니다. 따라서 : 부트 스트랩의 "전체 화면보기"(너비 940px 이상)를 사용하는 경우 버그가 없습니다.

인사말 Ralph

추신 : IE9, IE10 및 Firefox 25에서 잘 작동합니다. 다른 사람을 확인하지 않았습니다.하지만 문제를 볼 수 없습니다. :-)

Question 16

이것은 나를 위해 일했습니다. 나는 메뉴 버튼을 클릭했을 때 클래스 'in'을 추가하거나 제거했습니다. 그 클래스를 추가하거나 제거하면 토글이 기본적으로 작동하기 때문입니다. 'e.stopPropagation ()'은 부트 스트랩으로 기본 애니메이션을 중지하는 것입니다 (아마도). 클래스 추가 또는 제거 대신 'toggleClass'를 사용할 수도 있습니다.

$ ( '# ChangeToggle'). on ( 'click', function (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

Question 17

당신은 사용합니다

ul.nav {
    display: none;
}

이것은 기본적으로 navbar를 닫습니다. 누구든지 유용하다고 생각하면 알려주세요

Question 18

예를 들어 전환 가능 아이콘이 매우 작은 장치에만 표시되는 경우 다음과 같이 할 수 있습니다.

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

[data-toggle = "offcanvas"]를 클릭하면 부트 스트랩의 .hidden-xs가 내 # side-menu에 추가되어 사이드 메뉴 콘텐츠가 숨겨 지지만 창 크기를 늘리면 다시 표시됩니다.

Question 19

메뉴 HTML이

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

탐색 토글 'in'클래스가 추가되고 토글에서 제거됩니다. 반응 형 메뉴가 열려 있는지 확인한 다음 닫기 토글을 수행합니다.

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

Question 20

콘솔 오류없이 Tuggle Nav Close, IE 브라우저 호환 답변. 부트 스트랩을 사용하는 경우 다음을 사용하십시오.

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

Question 21

$('.navbar-toggle').trigger('click');

Question 22

자바 스크립트가없는 부트 스트랩 4 솔루션

data-toggle="collapse" data-target="#navbarSupportedContent.show" div에 속성 추가<div class="collapse navbar-collapse">

올바른 정보를 제공했는지 확인하십시오 id.data-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show 큰 해상도에서 메뉴 깜박임을 방지하는 것입니다.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

스 니펫 확장