Câu hỏi Bootstrap sụp đổ thành phần không đóng menu trên nhấp chuột đi


Khi tôi nhấp vào trình đơn không ẩn, tôi tìm thấy mã này tại: http://getbootstrap.com/components/#navbar nhưng không hiệu quả.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button 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" href="index.php">
        <img class="desktop-logo" src="img/logo.png" alt="Company title">
        <img class="mobile-logo" src="img/logo-white.png" width="169" alt="">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class=""><a href="index.php">List</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Có, tôi đã nhận: cài đặt thư viện thích hợp: Bootstrap v3.0.3. Không có lỗi javascript và mã HTML hợp lệ.

Các bước để tái sản xuất: Tải xuống gói zip bootstrap 3.0.3, tạo tệp index.html, chèn công cụ css và js cho bootstrap. Nhập mã ở trên và mã không đóng khi nhấp hoặc chạm vào.

Vì vậy, là mã có nghĩa là để ẩn menu hay không?


11
2018-02-01 09:25


gốc


Những gì bạn có nghĩa là "menu không ẩn"? Bạn có thể cụ thể hơn không - winnyboy5
Khi bạn nhấp vào menu sẽ biến mất, phải không? - Damjan Dimitrioski
Bạn có nghĩa là menu thả xuống hoặc toàn bộ trình đơn. Hoặc thanh 3 vạch ẩn menu - winnyboy5
wstaw.org/m/2014/02/01/plasma-desktopIq4999.png đây là ảnh chụp màn hình của một số menu thả xuống, menu thả xuống trong hình ảnh đang mở, phải không? - Vì vậy, khi tôi nhấp vào các phần tử HTML khác, tức là "bên ngoài" đường viền menu, trình đơn sẽ ẩn, như trong trường hợp ví dụ về phương thức, tôi không hiểu tại sao tôi không rõ ràng? - Damjan Dimitrioski
ồ được rồi ...... - winnyboy5


Các câu trả lời:


Điều này nên làm

<script>
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
</script> 

Đây là gist tham khảo

https://gist.github.com/winnyboy5/8750551


15
2018-02-01 10:54





Tôi đã có cùng một vấn đề và giải pháp là để đảm bảo rằng bootstrap.js không được tham chiếu nhiều lần. Tôi đã tải nó hai lần trong trang của tôi và điều này được mô tả vấn đề.

    <script src="/js/bootstrap.min.js"></script>

Không tải nó nhiều hơn một lần!


29
2017-09-16 12:13



Điều này làm việc cho tôi, bạn có thể biết lý do điều này không thành công? - Eugene
cũng làm việc cho tôi, cảm ơn :) - shahbaz pothiawala
Đã tải nó hai lần chưa, cảm ơn con trỏ! +1 - Matt The Ninja


Ở trên hiển thị một hành vi kỳ lạ đối với tôi, nơi đôi khi một thanh cuộn sẽ xuất hiện trên nav. Đó có thể là từ một số css lạ mắt nhưng bên dưới đã sửa nó cho tôi.

$(document).on('click',function(e){
  if($('#bs-example-navbar-collapse-1').hasClass('in')){
    $('.collapse').collapse('hide'); 
  }
})

1
2018-04-05 23:56





Có một giải pháp khác đây, cũng hoạt động khi có các menu phụ.

<script>
$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
        $(this).collapse('hide');
    }
});
</script>

1
2017-08-12 22:20





Tôi đã từng gặp vấn đề tương tự. Không sử dụng tập lệnh "hack". Chỉ cần thử sử dụng jquery 2.1.4 trở lên.


0
2017-08-05 07:14



Bài đăng này không phải là nỗ lực thực sự khi trả lời câu hỏi. Xin lưu ý Stack Overflow không phải là diễn đàn thảo luận, đó là trang Hỏi đáp, nơi mỗi bài đăng là câu hỏi hoặc câu trả lời cho câu hỏi. Bài đăng cũng có thể có bình luận - những câu nhỏ như thế này - có thể được sử dụng để phê bình hoặc yêu cầu làm rõ từ tác giả. Đây phải là nhận xét hoặc một câu hỏi mới. Đảm bảo bạn đặt một câu hỏi hay - ddb


<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

^ Tôi có tệp .js quá xa. Thay đổi dòng của bạn để trông giống như ở trên và nút đáp ứng cũng nên đóng menu.


0
2017-09-18 21:11