드롭 다운 클래스가있는 특정 메뉴 항목을 클릭 할 때 navbar 숨기기/접기를 방지하는 방법은 무엇입니까?

Question

다음 코드에서 About Us 섹션이나 Projects 섹션을 클릭하면 탐색 모음 축소를 방지하려고합니다. 이 두 버튼에 event.stopPropagation()을 시도했지만 jQuery 코드가 실행될 때까지 탐색 막대가 이미 접히고 숨겨져 있습니다.

<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> 

어떻게 Projects 또는 About Us 버튼을 클릭에 ( 992px보다 작은 화면 크기에) 네비게이션 바의이 숨어을 방지하기 위해?

Answer 1

아아 실행하는 I 발견 하위 섹션의 헤더 (About Us 및 Projects)를 포함하여 모든 버튼의 클릭 이벤트 중에 호출 된 함수입니다. 이것은 다른 사람이 시작한 프로젝트를 계속하려고 할 때 발생합니다. 나는 그것을 변경

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

:

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

그리고이 호출하는 클래스 sepecified :

<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

여기를 볼 수 있습니다. 조금 힘드는 해결책. 먼저 bootstarp Google 이벤트 "hide.bs.popover"를 시도했습니다 (원하는 경우 http://getbootstrap.com/javascript/#collapse을 확인할 수 있습니다). (

나는 jquery 만 사용합니다. 이제는 작동합니다. 클릭하면 해결 방법이 매우 간단합니다. "A"다음 "리는"그래서 내가 "리"클래스 그때 내가이 무엇 인 데이터 켜고 끌 속성

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

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

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

Answer 3

희망 제거 "열기"했다 확인하는 수준의 "개방"추가 개방 드롭 부트 스트랩 달성을 위해 노력하고 있습니다. eventhide.bs.dropdown을 추가하고 일반적으로 이벤트 전파를 중지합니다. event.stopPropagation();이고 앵커 또는 기본 동작이 요소에 바인딩되어 있으면 preventDefault가 필요합니다. 화면 크기를 기대 미만인 992px가 if (screen.height < '992') { } 같은 화면 폭 체크인/heihgt 가져야하고 코드 거치지 4 일 후, 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>