एक विशेष मेनू-आइटम पर क्लिक करने के लिए नेविबार छुपा/ढहने को कैसे रोकें जिसमें ड्रॉपडाउन क्लास है?

Question

मैं निम्नलिखित कोड में About Us अनुभाग या Projects अनुभाग पर क्लिक करने के लिए नेविबार पतन को रोकने की कोशिश कर रहा हूं। मैंने इन दो बटनों पर event.stopPropagation() की कोशिश की है, लेकिन जब तक jQuery कोड निष्पादित नहीं होता है, तब तक navbar पहले से ही गिर जाता है और खुद को छुपाता है।

<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

आह पर अमल, कोड के माध्यम से जा के 4 दिनों के बाद, मैंने पाया उपखंड (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 toogle घटना "hide.bs.popover" (यदि आप चाहते हैं, तो आप http://getbootstrap.com/javascript/#collapse देख सकते हैं) मैं इस तरह से नहीं कर सकता :(

मैं केवल jquery का उपयोग करता हूं यह काम करता है। जब आप क्लिक करते हैं तो समाधान बहुत आसान होता है "एक" खुला लटकती bootstrap तो वर्ग "खुला" के लिए "ली" तो मैं जाँच "ली" वर्ग "खुला" है तो मैं हटाने डेटा-टॉगल विशेषता

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 जोड़ें और आमतौर पर हमद्वारा ईवेंट प्रचार को रोकते हैंऔर रोकथाम डीफॉल्ट की आवश्यकता है यदि कोई एंकर या डिफ़ॉल्ट क्रिया तत्व के लिए बाध्य है। स्क्रीन आकार की उम्मीद कम से कम 992pxif (screen.height < '992') { } के रूप में/स्क्रीन की चौड़ाई का एक चेक heihgt होने के लिए है और फिर 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>