Làm thế nào để ngăn chặn điều hướng ẩn/thu gọn khi nhấp vào một mục menu cụ thể có lớp thả xuống?

Question

Tôi đang cố ngăn chặn sự sụp đổ của thanh điều hướng khi nhấp vào phần About Us hoặc Projects trong mã sau. Tôi đã thử event.stopPropagation() trên hai nút này, nhưng khi cho đến khi mã jQuery thực hiện, thanh điều hướng đã sụp đổ và ẩn nó.

<li class="page-scroll"> 
    <a href="#home">Home</a> 
</li> 
<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="aboutus.html">Vision</a></li> 
     <li><a href="team.html">Founding Team</a></li> 
     <!--<li><a href="donors.html">Members</a></li>--> 
    </ul> 
</li> 
<li class="page-scroll"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="sample-campaign - vidya.html">Vidya Vistar</a></li> 
     <li><a href="sample-campaign - safai.html">Safai Abhyaan</a></li> 
     <li><a href="sample-campaign - clothes.html">Clothes Donation</a></li> 
     <li><a href="sample-campaign - food.html">Food Donation</a></li> 
     <li><a href="sample-campaign - onetime.html">Ad Hoc</a></li> 
    </ul> 
</li> 
<li class="page-scroll"> 
    <a href="#events">Events</a> 
</li> 
<li class="page-scroll"> 
    <a href="#gallery">Gallery</a> 
</li> 
<li class="page-scroll"> 
    <a href="#join">Get Involved</a> 
</li> 

Làm thế nào để ngăn chặn ẩn này của navbar (trên kích thước màn hình nhỏ hơn 992px) trên cách nhấn vào nút Projects hoặc About Us?

Answer 1

Than ôi, sau 4 ngày kể từ khi trải qua các mã, tôi thấy chức năng được gọi trong sự kiện nhấp của tất cả các nút, bao gồm tiêu đề của các phần phụ (About Us và Projects). Điều này xảy ra khi bạn cố gắng tiếp tục một dự án do người khác bắt đầu. Dưới đây là các mã:

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

tôi đã thay đổi nó để:

// Closes the Responsive Menu on Menu Item Click 
$('.toggle-responsive').click(function() { 
    $('.navbar-toggle:visible').click(); 
}); 

Và sepecified các lớp mà nó nên được gọi vào lúc:

<li class="page-scroll toggle-responsive"> 
    <a href="#home">Home</a> 
</li> 
<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li class="toggle-responsive"><a href="aboutus.html">Vision</a></li> 
     <li class="toggle-responsive"><a href="team.html">Founding Team</a></li> 
     <!--<li><a href="donors.html">Members</a></li>--> 
    </ul> 
</li> 
<li class="page-scroll"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li class="toggle-responsive"><a href="sample-campaign - vidya.html">Vidya Vistar</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - safai.html">Safai Abhyaan</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - clothes.html">Clothes Donation</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - food.html">Food Donation</a></li> 
     <li class="toggle-responsive"><a href="sample-campaign - onetime.html">Ad Hoc</a></li> 
    </ul> 
</li> 
<li class="page-scroll toggle-responsive"> 
    <a href="#events">Events</a> 
</li> 
<li class="page-scroll toggle-responsive"> 
    <a href="#gallery">Gallery</a> 
</li> 
<li class="page-scroll toggle-responsive"> 
    <a href="#join">Get Involved</a> 
</li> 

Answer 2

Tại đây bạn có thể xem. Một chút giải pháp phức tạp. Đầu tiên tôi đã thử khởi động sự kiện khởi động quá nhanh "hide.bs.popover" (Nếu bạn muốn, bạn có thể kiểm tra http://getbootstrap.com/javascript/#collapse) tôi không thể làm theo cách này: (

Tôi chỉ sử dụng jquery Bây giờ nó hoạt động. Giải pháp rất đơn giản khi bạn bấm "a" bootstrap thả xuống mở sau đó thêm lớp "mở" để "li" Vì vậy, tôi đã kiểm tra "li" lớp đã "mở", sau đó tôi loại bỏ dữ liệu toogle thuộc tính

var elementAbout = $(".dropdown a"); 

elementAbout.click(function() { 
    if($("li.dropdown").hasClass("open")){ 
    elementAbout.removeAttr("data-toggle") 
    } 
}) 

https://jsfiddle.net/sercantimocin/v992z8er/3/

Answer 3

Hy vọng điều này là những gì bạn đang cố gắng đạt được, thêm eventhide.bs.dropdown và thông thường chúng tôi sẽ ngừng tuyên truyền sự kiện theo event.stopPropagation(); và ngăn chặnDefault là cần thiết nếu bất kỳ hành động neo hoặc mặc định nào bị ràng buộc với phần tử. Mong các kích thước màn hình để được ít hơn 992px đã một tấm séc cho chiều rộng màn hình/heihgt như if (screen.height < '992') { } và sau đó thực hiện các e.preventDefault(); and e.stopPropagation();

$('.dropdown').on('hide.bs.dropdown', function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 
<ul class="custom"> 
 
    <li class="page-scroll"> 
 
    <a href="#home">Home</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="aboutus.html">Vision</a> 
 
     </li> 
 
     <li><a href="team.html">Founding Team</a> 
 
     </li> 
 
     <!--<li><a href="donors.html">Members</a></li>--> 
 
    </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="sample-campaign - vidya.html">Vidya Vistar</a> 
 
     </li> 
 
     <li><a href="sample-campaign - safai.html">Safai Abhyaan</a> 
 
     </li> 
 
     <li><a href="sample-campaign - clothes.html">Clothes Donation</a> 
 
     </li> 
 
     <li><a href="sample-campaign - food.html">Food Donation</a> 
 
     </li> 
 
     <li><a href="sample-campaign - onetime.html">Ad Hoc</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page-scroll"> 
 
    <a href="#events">Events</a> 
 
    </li> 
 
    <li class="page-scroll"> 
 
    <a href="#gallery">Gallery</a> 
 
    </li> 
 
    <li class="page-scroll"> 
 
    <a href="#join">Get Involved</a> 
 
    </li> 
 
</ul>