Menu bị sập Bootstrap 3 không đóng khi nhấp

122

Tôi có một điều hướng tiêu chuẩn ít nhiều từ bootstrap 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

Nó sụp đổ bình thường trên các thiết bị nhỏ hơn. Nhấp vào nút menu sẽ mở rộng menu nhưng nếu tôi nhấp (hoặc chạm vào vấn đề đó) trên một liên kết menu, menu vẫn mở. Tôi phải làm gì, để đóng lại?

html  css  twitter-bootstrap  navigation 
— Chứng hoang tưởng
nguồn
5
câu trả lời của user3669917 chắc chắn là câu trả lời dễ nhất và thẳng nhất!
— Thomas
1
— Inanc Gumus

Câu trả lời:

48

Cài đặt mặc định của Bootstrap là để giữ menu mở khi bạn nhấp vào một mục menu. Bạn có thể ghi đè thủ công hành vi này bằng cách gọi .collapse('hide');phần tử jQuery mà bạn muốn thu gọn.

— VCNinc
nguồn
8
Điều này là sai, bootstrap tự động chuyển lớp "sụp đổ". Bạn không cần bất kỳ mã jquery bổ sung. Nếu bạn có hành vi như vậy, điều đó có nghĩa là có gì đó không đúng trong mã html của bạn (về phần tôi, tôi đã bao gồm hai lần jquery và bootstrap, xem câu trả lời của @raisercostin).
— RomOne
@RomOne Câu trả lời này là chính xác. Bootstrap không không đóng menu sau khi liên kết được nhấp vào theo mặc định. Câu trả lời khác chỉ có thể áp dụng nếu mọi người bao gồm không chính xác jQuery hai lần mà không phải là câu trả lời đúng cho câu hỏi này.
— Zim
136

Chỉ để chia sẻ điều này từ các giải pháp trên GitHub, đây là câu trả lời phổ biến:

https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

Cái này được nối với tài liệu, vì vậy bạn không cần phải làm điều đó trên ready () (bạn có thể tự động nối các liên kết vào menu của mình và nó vẫn hoạt động) và nó chỉ được gọi nếu menu đã được mở rộng. Một số người đã báo cáo nhấp nháy kỳ lạ nơi menu mở ra và sau đó đóng ngay lập tức với mã khác không xác minh rằng menu có lớp "trong".

[CẬP NHẬT 2014-11-04] rõ ràng khi sử dụng các menu phụ, phần trên có thể gây ra sự cố, vì vậy phần trên đã được sửa đổi thành:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
— Kevin
nguồn
1
Hoạt động hoàn hảo. Cám ơn vì đã chia sẻ!
— Rodrigo Chiong
Bạn có thể giải thích '$ (này) .collapse (' ẩn ');' xin vui lòng. tôi không hiểu 'sự sụp đổ' đến từ đâu
— timebandit
@ImranNazir, xin lỗi, đây là cách sau câu hỏi, nhưng collapselà một phương thức được xác định bởi bootstrap và được đính kèm với đối tượng jQuery ... có lẽ, họ sử dụng lại mục đích này cho nhiều mục đích (accordion, navbar, v.v.): getbootstrap.com/javascript / # sụp đổ sử dụng
— Kevin Nelson
Mã cập nhật làm việc cho tôi, câu trả lời ở trên không. Cảm ơn!
— RandomUs1r
"[CẬP NHẬT 2014-11-04]" đã hoạt động. Đối với giải pháp khác, nơi đề xuất xóa tham chiếu trùng lặp với bootstrap.js và jquery không cần thiết cho giải pháp. Tôi tìm thấy giải pháp này để khắc phục vấn đề với ít thời gian hơn để gỡ lỗi và với hành vi rõ ràng hơn. Cảm ơn bạn!. Tôi hy vọng điều này sẽ giúp bạn vì nó đã giúp tôi.
— Nour Lababidi
122

Thay đổi điều này: 

<li><a href="#one">One</a></li>

đến đây:

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

Sự thay đổi đơn giản này đã làm việc cho tôi.

Tham chiếu: https://github.com/twbs/bootstrap/issues/9013

— FullStackDev
nguồn
14
Giải pháp này phù hợp với chế độ xem Di động nhưng nó hiển thị hiển thị / ẩn hình động trong màn hình lớn khi nhấp vào liên kết.
— Ayman Al-Absi
22
@ AymanAl-Absi Bạn phải thêm .invào cuối data-targetgiá trị : data-target=".navbar-collapse.in". Từ nhận xét trong câu trả lời này: stackoverflow.com/a/21797534/89818
— caw
Điều này làm việc rất tốt cho tôi nhưng nó phá vỡ cuộn giấy, có ý tưởng nào tại sao lại như vậy không?
— Craig Harley
1
Làm việc cho tôi khi cập nhật mã ở trên với câu trả lời @caw. Tôi cũng đang sử dụng tính năng scrollspy.
— Niraj
Đây là giải pháp tốt nhất. Không có javascript, không có jQuery. Nếu bạn muốn liên kết nhất định để giữ menu mở, chỉ cần không thêm các thông số này. Nên được chỉ ra là câu trả lời tốt nhất. Cảm ơn bạn.
— ed1nh0
55

Tôi đã có cùng một vấn đề nhưng gây ra bởi bao gồm hai lần bootstrap.js và jquery.jscác tập tin.

Trong một lần nhấp, sự kiện đã được xử lý hai lần bởi cả hai trường hợp jquery. Một đóng và một mở nút bật tắt.

— nho khô
nguồn
3
Tôi có cùng một vấn đề nhưng không nhận ra họ đã được đưa vào hai lần. Cảm ơn bạn đã đăng bài này!
— Brian ONeil
2
Thực tập sinh của chúng tôi cũng vậy. Cảm ơn đã đăng bài này.
— Teisman 21/07/2015
2
Đàn ông! Tôi đã làm điều tương tự - tôi đoán tôi sẽ trở lại làm thực tập sinh!
— Dicer
2
Thật hữu ích! Tôi đã làm việc về điều này trong nhiều ngày. Điều này có thể rất phổ biến khi sử dụng một mẫu thanh điều hướng. Hãy cẩn thận nhé mọi người! :)
— Matt Butler
2
Điều này nên được đánh dấu là câu trả lời tốt nhất. Tôi gặp vấn đề tương tự khi gỡ bootstrap.js đã giải quyết vấn đề
— katwekibs
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Điều này sẽ giúp xử lý thả xuống trong thanh điều hướng

— Chakradhar Vyza
nguồn
Điều này đã khắc phục sự cố của tôi khi sử dụng bootstrap với javascript từ trình chiếu jssor tạo ra các vấn đề. Mã này cũng tạo ra một hiệu ứng tuyệt vời khi mở rộng và thu gọn menu di động.
— Adam West
Cảm ơn @Chakradhar, nó đã tiết kiệm thời gian của tôi.
— Omar Bahir
Cảm ơn, quên rằng Laravel 5.5 JS bao gồm B và Jquery trong tệp js chính.
— Jack Vial
12

Tôi đang gặp / có vấn đề tương tự với Bootstrap 4, alpha-6 và câu trả lời của Joakim Johansson ở trên đã giúp tôi đi đúng hướng. Không yêu cầu javascript. Đặt data-target = ". Navbar-crash" và data-toggle = "sụp đổ" vào thẻ div bên trong điều hướng, nhưng xung quanh các liên kết / nút, hoạt động với tôi.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>
Mở rộng đoạn trích

— Paul
nguồn
Bài viết của bạn đã giúp tôi rất nhiều. Điều này đã giải quyết nó cho tôi <body data-toggle = "sụp đổ" data-target = ". Navbar-crash">
— Dessus
Điều này đã được đăng 3 năm trước. Ngoài ra, nó phá vỡ hình ảnh động trong chế độ xem không di động.
— Bevor
6

Tôi biết câu hỏi này dành cho Bootstrap 3 nhưng nếu bạn đang tìm giải pháp cho Bootstrap 4 , chỉ cần làm điều này:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— Syed
nguồn
Tôi đang sử dụng BS4 beta và mã của bạn hoạt động hoàn hảo. Tôi đã thử tất cả các giải pháp được đề xuất khác ở đây mà không có may mắn. BS4 rõ ràng đã thay đổi đủ để các giải pháp khác không áp dụng.
— Xe đạp Dave
Đối với sự liên quan và để giữ mọi thứ đồng thời với thông tin cập nhật - Đây phải là câu trả lời tốt nhất.
— Ricky
@Ricky OP chỉ định Bootstrap 3, không phải 4.
— Malavos
Đối với các menu có trình đơn thả xuống, tôi đã sử dụng:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

Tôi đã có cùng một vấn đề, tôi đã sử dụng jQuery-1.7.1và bootstrap 3.2.0. Tôi đã thay đổi phiên bản jQuery của mình thành phiên bản ( jquery-1.11.2) mới nhất và mọi thứ đều hoạt động tốt.

— Mật độ
nguồn
5

tôi đã làm 

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
— dệt
nguồn
4

Mặc dù giải pháp được đăng trước đó để tự thay đổi mục menu, như bên dưới, hoạt động khi menu nằm trên một thiết bị nhỏ, nó có tác dụng phụ khi menu có chiều rộng đầy đủ và được mở rộng, điều này có thể dẫn đến một thanh cuộn ngang trượt qua mục thực đơn . Các giải pháp javascript không có tác dụng phụ này.

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

(xin lỗi vì đã trả lời như thế này, muốn thêm một bình luận cho câu trả lời đó, nhưng, dường như tôi không đủ tín dụng để đưa ra nhận xét)

— Wim Van
nguồn
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— Chít
nguồn
kiểm tra phiên bản mới Matthias S :-)
— Chít
@bfontaine Trước tiên, bạn phải thêm id vào menu div và khi bạn nhấp vào menu thì tất cả menu sẽ bị ẩn. Ví dụ: - Khi bạn nhấp vào menu about us, tab menu còn lại sẽ bị ẩn.
— Chít
1
cảm ơn bạn, nhưng xin vui lòng viết điều đó trong câu trả lời của bạn;)
— bfontaine
1

Trong trường hợp bạn muốn ghi đè thủ công hành vi này bằng cách gọi .collapse ('ẩn') trong một lệnh của góc, đây là mã:

tập tin javascript:

angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

Html: 

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
— Mirna De Jesus
nguồn
1

Hãy chắc chắn rằng bạn đang sử dụng phiên bản js bootstrap mới nhất. Tôi đã phải đối mặt với cùng một vấn đề và chỉ cần nâng cấp tệp bootstrap.js từ bootstrap-3.3.6 đã làm nên điều kỳ diệu.

— Aman Arun
nguồn
1

Nếu bạn chỉ muốn điều hướng của mình chuyển đổi khi được sử dụng trên màn hình di động, chỉ cần thêm data-toggle="collapse"vàdata-target="#navbar" vào một yếu tố của bạn sẽ hoạt động trên màn hình điện thoại di động, nhưng sẽ cho bạn một ánh sáng nhấp nháy kỳ lạ khi nhấp vào màn hình máy tính để bàn. Các giải pháp jQuery không hoạt động tốt nếu bạn ở trong môi trường Aurelia hoặc Angular.

Giải pháp tốt nhất cho tôi là tạo một thuộc tính tùy chỉnh lắng nghe truy vấn phương tiện tương ứng và thêm vào data-toggle="collapse"thuộc tính nếu muốn:

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

Thuộc tính tùy chỉnh với Aurelia trông như thế này:

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);
      }
    }
  }
}
Mở rộng đoạn trích

— hội trường
nguồn
0

Tôi thấy rằng sau nhiều đấu tranh, thử nghiệm và sai sót, giải pháp tốt nhất cho tôi trên jsfiddle. Liên kết đến cảm hứng trên jsfiddle.net . Tôi đang sử dụng thanh điều hướng trên thanh điều hướng của bootstrap với sự sụp đổ và chuyển đổi hamburger. Đây là phiên bản của tôi trên jsfiddle: thanh điều hướng jsfiddle Scrollspy . Tôi chỉ nhận được chức năng cơ bản bằng cách sử dụng các hướng dẫn trên getbootsrap.com. Đối với tôi, vấn đề chủ yếu nằm ở những hướng mơ hồ và js được đề xuất bởi trang getbootstrap. Phần tốt nhất là việc thêm một chút js (bao gồm một số nội dung được đề cập trong các chủ đề trên) đã giải quyết một số vấn đề về Scrollspy cho tôi bao gồm:

  1. Menu điều hướng được thu gọn / bật tắt ẩn khi điều hướng "phần" (ví dụ: href = "# foobar") (vấn đề giải quyết chủ đề này).
  2. "Phần" hoạt động đã được tô sáng thành công (ví dụ: js đã tạo thành công class = "active")
  3. Thanh cuộn dọc gây phiền nhiễu được tìm thấy trên điều hướng bị sụp đổ (chỉ trên màn hình nhỏ) đã bị loại bỏ.

LƯU Ý: Trong mã js được hiển thị bên dưới (từ liên kết jsfiddle thứ hai trong bài viết của tôi):

topMothy = $ ("# myScrollspy"),

... giá trị "myScrollspy" phải khớp với id = "" trong HTML của bạn như vậy ...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

Tất nhiên bạn có thể thay đổi giá trị đó thành bất kỳ giá trị nào bạn thích.

— Adam Calihman
nguồn
0

Tất cả những gì bạn cần là data-target = ". Navbar-sụp đổ" trong nút, không có gì khác.

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
— Marodo
nguồn
+1: Nó cũng hoạt động bằng cách thêm data-toggle = "sụp đổ" data-target = ". Navbar-sụp đổ" vào <a /> hoặc trong trường hợp của tôi <Link /> trong Meteorjs với React, Cảm ơn bạn.
— Joe L.
vâng, nó hoạt động với <a/>nhưng nó không hoạt động <NavLink/>, nó sụp đổ nhưng <NavLink/>không hoạt động nữa, có ý tưởng nào không?
— Kim tự tháp
0

Đây là mã làm việc cho tôi:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
— Roddy P. Carbonell
nguồn
0

Tôi đã có cùng một vấn đề, đảm bảo rằng bootstrap.js được bao gồm trong trang html của bạn. Trong trường hợp của tôi, menu đã mở nhưng không đóng. Ngay sau khi tôi bao gồm tệp js bootstrap, mọi thứ chỉ hoạt động.

— Elitmiar
nguồn
0

Đơn giản Hãy thử tạo một hàm trong javascript cho lớp thu gọn thả xuống.

Thí dụ:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

    $timeout(function(){
        $scope.preLoader = false;
        $(document).ready(function() {
            $("#dropdown-element").toggleClass('show');
        });
    },100);

};

Móc chức năng này để onClicklàm việc đơn giản cho tôi.

— yasir_mughal
nguồn
0

Tôi gặp vấn đề tương tự nhưng tôi sẽ không mở, nó sẽ mở / đóng nhanh chóng, tôi thấy rằng tôi đã tải jquery-1.11.1.min.js trước khi bootstrap.min.js. Vì vậy, tôi đã đảo ngược thứ tự của 2 tập tin đó và sửa menu của tôi. Chạy hoàn hảo bây giờ. Hy vọng nó giúp

— Vasko
nguồn
0

Vấn đề có thể là bạn đang sử dụng các phiên bản lỗi thời của bootstrap hoặc jquery, HOẶC bạn đang gọi nhiều hơn một phiên bản trong đánh dấu của mình.

Chỉ cần giữ các phiên bản mới nhất, bạn chỉ cần một tài liệu tham khảo. Giải quyết vấn đề.

— Nick
nguồn
0

bạn có thể muốn đảm bảo rằng bạn đang tải jQuery và Bootstrap.min.js ATF của bạn. Điều hướng của bạn là điều đầu tiên hiển thị trên trang, vì vậy nếu bạn có các tập lệnh ở dưới cùng của HTML, bạn sẽ mất bất kỳ chức năng JavaScript nào.

— Chris Johnson
nguồn
0

Tôi chỉ gặp vấn đề tương tự trên thiết bị di động nhưng đối với ứng dụng Angular và đây là những gì tôi đã làm:

app.component.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-md-12">
      <div class="navbar-header page-scroll">
      <button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" style="cursor: pointer;">
            ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a (click) = "closeMenu()" href="/#about">About</a></li>
            <li><a (click) = "closeMenu()" href="/#services">Services</a></li>
          </ul>
        </li>
        <li class="page-scroll">
          <a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>

app.component.ts 

 closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
    }
  }

Hy vọng nó giúp :)

— stathoula
nguồn
-2

Menu của tôi không phải là một tiêu chuẩn thanh điều hướng, nhưng tôi đã quản lý để tự động thu gọn mỏ, sử dụng chức năng "onclick" và ".click ()".

<div class="main-header">
    <div class="container">
        <div id="menu-wrapper">
            <div class="row">

                <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">

                </div> <!-- /.logo-wrapper -->

                <div class="logo-wrapper2 visible-xs col-xs-9">

                </div> <!-- /.smaller logo-wrapper -->

                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
                    <ul class="menu-first hidden-md hidden-sm hidden-xs">
                        <li class="active"><a href="#">item1</a></li> |
                        <li><a href="#our-team">item2</a></li> |
                        <li><a href="#services">item3</a></li> |
                        <li><a href="#elia">item4</a></li> |
                        <li><a href="#portfolio">item5</a></li> |
                        <li><a href="#contact">item6</a></li>
                    </ul>
                    <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                </div> <!-- /.main-menu -->
            </div> <!-- /.row -->
        </div> <!-- /#menu-wrapper -->
        <div class="menu-responsive hidden-lg">
            <ul>
                <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
                <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
                <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
                <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
                <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
                <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
            </ul>
        </div> <!-- /.menu-responsive -->
    </div> <!-- /.container -->
</div> <!-- /.main-header
— Bravo Stefane
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.