programing

클릭 시 Twitter 부트스트랩 탐색 축소 숨기기

itmemos 2023. 8. 10. 18:19
반응형

클릭 시 Twitter 부트스트랩 탐색 축소 숨기기

이는 하위 메뉴 드롭다운이 아니며 범주는 그림과 같은 클래스 li입니다.

enter image description here

응답 메뉴(템플릿이 한 페이지에 불과함)에서 범주를 선택하여 클릭할 때 자동으로 탐색 축소를 숨기려고 합니다.또한 템플릿에는 한 페이지만 있으므로 탐색으로 사용할 수도 있습니다.영향을 미치지 않는 솔루션을 찾고 있습니다. HTML 메뉴 코드는 다음과 같습니다.

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

사용해 보십시오.

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});

나단는지두가속복뿐입다니제할성을지▁▁the▁2▁of▁replicate다 2가지 속성만 합니다.btn-navbar(data-toggle="collapse" data-target=".nav-collapse.in") 다음과 같이 각 링크에 있습니다.

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
  </ul>
</div>

부트스트랩 4 Navbar에서in이 변었습니다되경으로 변경되었습니다.show구문은 다음과 같습니다.

data-toggle="collapse" data-target=".navbar-collapse.show"

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

기본 collapse.js 메서드(V3 문서, V4 문서)를 사용하는 것이 좋습니다.

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

조금의 중복 코드 없이 훨씬 더 우아하게, 간단히 적용하는 것입니다.data-toggle="collapse"그리고.data-target=".nav-collapse"Nav 자체의 속성:

<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
  <ul class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

매우 깨끗하며 JavaScript가 필요하지 않습니다.잘 작동합니다, 당신의 것이 있는 한.nav a는 뚱뚱한을 위한 있고, 이벤트 버블링을 하지 못하고 있습니다.e.stopPropagation()▁on를 nav a 항목.

업데이트:

<li>
  <a href="#about">About</a>
</li>

로.

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

이 간단한 변화가 저에게 효과가 있었습니다.

참조: https://github.com/twbs/bootstrap/issues/9013

사용자가 내비게이션 요소뿐만 아니라 본문의 아무 곳이나 클릭할 때마다 내비게이션을 닫아야 합니다.메뉴가 열려 있지만 사용자가 페이지 본문을 클릭합니다.사용자가 메뉴를 닫아야 합니다.

또한 토글 버튼이 표시되는지 확인해야 합니다. 그렇지 않으면 메뉴에 점프가 표시됩니다.

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});

부트스트랩 3.3.6에서 테스트 완료 - 작업!

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});

사용해보세요 > 부트스트랩 3.

제가 찾던 것과 정확히 일치합니다. 하지만 자바스크립트와 부트스트랩 모달과 충돌이 있었고, 이것이 그것을 해결했습니다.

    $(function() {
    $('.navbar-nav').on('click', function(){ 
        if($('.navbar-header .navbar-toggle').css('display') !='none'){
            $(".navbar-header .navbar-toggle").trigger( "click" );
        }
    });
});

이게 도움이 되길 바랍니다.

이것은 저에게 잘 통했습니다.승인된 답변과 동일하지만 데스크톱/태블릿 보기와 관련된 문제를 해결합니다.

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});

나는 기본 부트스트랩 3의 collapse.js 메서드를 사용하는 것이 좋다고 생각합니다..navbar-collapse아래 표시된 것처럼 숨길 수 있는 요소입니다.

다른 솔루션은 웹 페이지에 요소가 표시되거나 작동하는 방식에 다른 원하지 않는 문제를 일으킬 수 있습니다.따라서 일부 솔루션은 초기 문제를 해결하는 것처럼 보일 수 있지만 다른 솔루션을 도입하는 것이 좋습니다. 따라서 수정 후 사이트에 대한 철저한 테스트를 수행해야 합니다.

이 코드의 작동 상태 확인하기

  1. 아래의 "이 코드 조각 실행"을 누릅니다.
  2. 전체 페이지 단추를 누릅니다.
  3. 드롭다운이 활성화될 때까지 창 크기를 조정합니다.
  4. 그런 다음 메뉴 옵션을 선택하고 voila!

건배!

$('.nav a').click(function() {
  $('.navbar-collapse').collapse('hide');  
});
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Franciscus Agnew">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Navbar Collapse Function</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <header>
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
            <a class="navbar-brand" href="#">Brand Logo</a>
          </div><!-- navbar-header -->
    
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#staff">Staff</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul><!-- navbar-right -->
          </div><!-- navbar-collapse -->
          
        </div><!-- container -->
      </nav><!-- navbar-fixed-top -->
    </header>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <!-- Custom Navbar Collapse Script Solution -->
    <script>
      $('.nav a').click(function() {
        $('.navbar-collapse').collapse('hide');  
      });
    </script>
  </body>
</html>

각 드롭다운 링크에 data-target="message" 및 data-target=.nav-target"을 입력합니다. 여기서 nav-target은 드롭다운 목록에 지정하는 이름입니다.

<ul class="nav" >
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
      <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
      <li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
      <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
      <!-- dropdown -->
  </ul>

이것은 모바일 화면처럼 드롭다운이 있는 화면에서는 완벽하게 작동하지만 데스크톱과 태블릿에서는 깜박임이 발생합니다..collapsing 클래스가 적용되기 때문입니다.깜박임을 제거하기 위해 미디어 쿼리를 만들고 축소 클래스에 숨겨진 오버플로를 삽입했습니다.

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

.in "을 ="data-target="..in " 합니다.<a>저를 위해 일했습니다.

<div>

        <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a
                    href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
                </a></li>
            </ul>
    </div>

제가 어떻게 했냐면요.더 원활한 방법이 있다면 알려주시기 바랍니다.

내부<a>에 대한 가 있는 이 했습니다.

onclick="$('.navbar-toggle').click()"

슬라이드 애니메이션을 보존합니다.따라서 전체적으로 사용할 때는 다음과 같습니다.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="home.html">My Cool Site</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

100% 작동:-

HTML에 추가

<div id="myMenu" class="nav-collapse">

자바스크립트

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

$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

참고 모바일 터치를 위한 "터치 시작"을 추가했습니다. 터치 시작/종료는 지연되지 않습니다.

이것은 내가 사용해 본 것 중 가장 좋은 해결책입니다.

$(document).ready(function () {

        $('.nav a').on('click', function () {

            if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
            if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
        });

    });

이 솔루션을 사용할 때 데스크톱 탐색 모음이 깜박이는 것을 본 사람:

$('.nav a').on('click', function(){
    $(".navbar-collapse").collapse('hide');
});

이 문제에 대한 간단한 해결책은 'in'이 있는지 확인하는 것만으로 접힌 탐색 모음을 참조하는 것입니다.

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

이렇게 하면 Navbar가 모바일 모드일 때 클릭하면 Navbar가 축소되지만 데스크톱 버전은 그대로 유지됩니다.이렇게 하면 많은 사람들이 데스크톱 버전에서 볼 수 있는 깜박임을 피할 수 있습니다.

또한 드롭다운 메뉴가 있는 탐색 모음이 있는 경우 탐색 모음을 클릭하면 바로 숨겨지므로 탐색 모음이 표시되지 않으므로 드롭다운 메뉴(예: I do!)가 있는 경우 다음을 사용합니다.

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

DOM에서 클릭한 링크 위에 드롭다운 클래스가 있는지 확인합니다. 이 클래스가 있는 경우 링크가 드롭다운 메뉴를 시작하려고 했기 때문에 메뉴가 숨겨지지 않습니다.드롭다운 메뉴 내의 링크를 클릭하면 탐색 모음이 올바르게 숨겨집니다.

$("body,.nav a").click(function (event) {

    // only do this if navigation is visible, otherwise you see jump in
    //navigation while collapse() iS called 
    if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
    $('.navbar-collapse').collapse('toggle');
  }
});

부트스트랩 5.3 - 2023년 업데이트

다음은 부트스트랩 5.2 이상에서 작동합니다.

<div class="collapse navbar-collapse" id="main-menu-navbar">
    <ul class="navbar-nav me-auto my-2 my-lg-0">
        <li class="nav-item">
            <a class="nav-link d-lg-none" href="/">
            <span data-bs-toggle="collapse" data-bs-target="#main-menu-navbar">Home</span>
            </a>
            <a class="nav-link d-none d-lg-block" href="/">Home</a>
        </li>
    </ul>
</div>

탐색 항목의 링크 2개

의 링크를 했습니다. 이 2개의 링크를 한다면. 왜냐하면 만약 당신이data-bs-toggle="collapse" data-bs-target="#main-menu-navbar"플래시"되므로 첫 및 더두▁than가▁smaller▁your당▁and것"입될다니▁will▁on▁screens▁hide/▁will보다 화면에서 그래서 첫 번째 링크는 LG와 더 넓은 화면에서 숨기고 두 번째 링크는 반대로 LG보다 작은 화면에서 숨길 것입니다.

이것은 애니메이션을 만드는 대신 위 답변과 동일한 개념의 탐색 축소를 숨깁니다.

JS:

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML:

<div class="navbar-collapse" id="funk">

저는 이미 애니메이션화된 localScroll.js를 사용하기 때문에 단일 페이지 사이트에서 이것을 선호합니다.

모바일 뷰: 부트스트랩 + 드롭다운 + jquery + 같은 페이지의 앵커/ids를 가리키는 탐색 항목으로 토글 탐색을 숨기는 방법, 한 페이지 템플릿

위 솔루션 중 하나를 사용하여 실험한 문제는 하위 메뉴 항목만 축소하고 탐색 메뉴는 축소하지 않는다는 것입니다.

그래서 저는 제 생각을 했습니다.그리고 우리는 무엇을 관찰할 수 있습니까?링크할 스크롤을 클릭할 때마다 페이지를 해당 위치로 스크롤하고 동시에 메뉴를 접어서 페이지 보기를 복원합니다.

음... 스크롤 기능에 이 일을 할당하는 게 어때요?쉬움 :-)

그래서 두 코드에서

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

그리고.

// scroll function
function scrollToID(id, speed){
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
}

방금 두 기능에 동일한 명령을 추가했습니다.

    if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}

(위의 기여자 중 한 명에게 경의를 표함)

이와 같이 (두 스크롤 모두에 동일하게 추가해야 함)

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

실제로 작동하는 것을 보고 싶다면 NAS를 통해 복구하십시오.

부트스트랩3 사용자는 아래의 코드를 시도합니다.그것은 나에게 효과가 있었다.

function close_toggle() {
   if ($(window).width() <= 768) {
      $('.nav a').on('click', function(){
          $(".navbar-toggle").click();
      });
   }
   else {
     $('.nav a').off('click');
   }
}
close_toggle();

$(window).resize(close_toggle);

은 " " "을 합니다..inClass on Class on the Collapse 요소를 클릭하여 애니메이션을 트리거합니다.만약 당신이 단순히 그것을 제거한다면..in클래스, 애니메이션은 실행되지 않지만 요소를 숨깁니다. 즉, 원하는 요소를 정확하게 숨깁니다.

실속가더빠를 이 더 것 .if 클래스가 입니다..in요소에 설정되었습니다.

그래서 이 코드는 다음과 같이 말합니다.

나의 요소가 클래스를 가지고 있다면,.in기본 부트스트랩 애니메이션을 트리거하여 닫습니다. 동작합니다.

$('#navbar a').on('click touchstart', function() {
    // if .in class is set on element, the element is visible – you want to hide it
    if ($('#navbar').hasClass('in')) {
        // collapse toggle will remove the .in class and animate the element closed 
        $('#navbar').collapse('toggle');
    }
})

ID를 각각에 추가합니다.

<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
    <ul class="nav">
      <li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
    </ul>
</div>

부트스트랩 3.*의 또 다른 빠른 솔루션은 다음과 같습니다.

$( document ).ready(function() {
    //
    // Hide collapsed menu on click
    //
    $('.nav a').each(function (idx, obj) {
        var selected = $(obj);

        selected.on('click', function() {
            if (selected.closest('.collapse.in').length > 0) {
                $('.navbar-toggle').click(); //bootstrap 3.x by Richard
            }
        });
    });
});

Aurelia와 함께 작동하는 솔루션을 여기에 게시했습니다. https://stackoverflow.com/a/41465905/6466378

문제는 당신이 그냥 추가할 수 없다는 것입니다.data-toggle="collapse"그리고.data-target="#navbar"당신의 요소들에게.그리고 jQuery는 Aurelia 또는 Angular 환경에서는 작동하지 않습니다.

나에게 가장 좋은 해결책은 해당 미디어 쿼리를 수신하고 다음에 추가하는 사용자 지정 특성을 만드는 것이었습니다.data-toggle="collapse"원하는 경우 속성:

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Aurelia의 사용자 지정 특성은 다음과 같습니다.

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}

체크인은 'in' 클래스를 체크하여 메뉴를 열고 코드를 실행합니다.

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

완벽하게 작동합니다.

저는 bootstrap 4에 있고, fullPage.js와 탑 내비게이션을 사용하고 있으며, 여기에 나열된 모든 것을 시도했고, 혼합된 결과를 얻었습니다.

  • 최선의 깨끗한 방법을 시도했습니다.

    data-toggle="collapse" data-target=".navbar-collapse.show"

    메뉴는 접히겠지만, href 링크는 아무 데도 연결되지 않습니다.

  • 논리적인 다른 방법을 시도했습니다.

    $('myClickableElements').on('click touchstart', function(){
  $(".navbar-collapse.show").collapse('hide');
  // or
  $(".navbar-collapse.show").collapse('toggle');
  // or
  $('.navbar-toggler').click()
});

    터치 스타트 이벤트로 인해 이상한 동작이 발생할 수 있습니다. 클릭한 버튼이 실제로 클릭한 버튼이 아니기 때문에 링크가 끊어집니다.게다가 .show 클래스를 내 내비게이션의 다른 관련 없는 드롭다운에 추가하여 더 이상한 것들을 야기할 것입니다.

  • div를 li로 변경하려고 했습니다.
  • e.proventDefault() 및 e.stopPropagation()을(를) 시도했습니다.
  • 더 노력하고 더 노력했습니다.

아무 것도 안 될 거예요.

그래서 대신에, 저는 (지금까지) 그것을 할 수 있는 놀라운 아이디어를 얻었습니다.

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

저는 이미 해시체인지 기능에 내용이 있어서 이 줄만 추가하면 되었습니다.

해시가 변경될 때 메뉴를 접는 것(즉, 다른 곳으로 이어지는 클릭)이 실제로 제가 원하는 대로 수행됩니다.좋은 점은 메뉴에 링크를 추가할 수 있기 때문입니다. 링크를 접을 수 없습니다.

누가 알겠어요, 어쩌면 이것이 제 상황에 있는 누군가를 도울지도 몰라요!

그리고 그 스레드에 참여해주신 모든 분들께 감사드리며, 여기서 배울 수 있는 많은 정보들이 있습니다.

언급URL : https://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click

반응형

'programing' 카테고리의 다른 글

UIButton의 탭 영역을 늘리려면 어떻게 해야 합니까?  (0) 2023.08.10
VBA(Excel)에서 VSTO 애플리케이션-addin 유형 액세스  (0) 2023.08.10
도커 실행 명령에서 Java 옵션/변수를 Springboot 앱으로 전달하는 방법  (0) 2023.08.10
Oracle SQL Developer의 DateTime 필드에서 시간만 추출하는 방법은 무엇입니까?  (0) 2023.08.10
선택된 행 사용 위치UITableView에 대한 IndexPath 또는 prepareForSegue 메서드를 선택하시겠습니까?  (0) 2023.08.10

'programing'의 다른글

  • 현재글클릭 시 Twitter 부트스트랩 탐색 축소 숨기기

관련글

댓글

티스토리툴바