Keep-bootstrap-3-dropdown-when-clicked

问题描述

我需要帮助实现与以下链接相同的导航。

它具有我的代码以及客户端要求。我使用Bootstrap 3

  Bootstrap下拉菜单 -  dropdown.js 
  pre> 
 
 
  
 
 
 
请帮助。
解决方案
  
 
 
 
 ： 
 
 
而不是仅侦听 .dropdown的 hide.bs.dropdown 事件。 active  
将事件处理程序应用于 .dropdown 。 
 
 
 
基本上，更改：
 
 
 
  $（dropdown.active）。 on（hide.bs.dropdown，function（e）{ 
 
 
 
至：
 
 $ b b 
  $（。dropdown）。on（hide.bs.dropdown，function（e）{ 
 
 
 
 
 
 
  EDIT： 
为了覆盖默认的下拉行为，您需要忽略 active 状态，因为多个 li 元素可以保持展开状态，您需要自行切换公开程度。
 
 
 
  
 代码： 
  $ ）{
 
 //处理显示/隐藏切换自己
 $（。dropdown）。on（click，function（e）{
 if（$ .currentTarget）.hasClass（open））
 $（e.currentTarget）.toggleClass（open，false）; 
 else 
 $（e.currentTarget）.toggleClass open，true）; 
 e.preventDefault（）; 
 return false; 
}）; 
 
 //抑制默认行为
 $（。dropdown）。on（hide.bs.dropdown，doNothing）; 
 $（。dropdown）。on（show.bs.dropdown，doNothing）; 
 
 function doNothing（e）{
 e.preventDefault（）; 
 return false; 
} 
}）; 
  
 
I need help achieving the same navigation as below link.
It has my code along with clients requirement. And I'm using Bootstrap 3
Bootstrap Dropdowns - dropdown.js
jsfiddle Link
Please help.
 解决方案 
Updated fiddle
You need to make just one change:
Instead of listening to hide.bs.dropdown event for only .dropdown.activeapply the event handler to .dropdown. 
Basically, change:
$(".dropdown.active").on("hide.bs.dropdown",function(e) {
to:
$(".dropdown").on("hide.bs.dropdown",function(e) {
EDIT:In order to override the default dropdown behavior, you'll need to ignore the active state since more than one li element can remain expanded and you'll need to toggle visibility yourself.
Here's the updated demo
Code:
$(function(){

    //  Handle show/hide toggle yourself
    $(".dropdown").on("click",function(e) {
        if($(e.currentTarget).hasClass("open"))
            $(e.currentTarget).toggleClass("open",false);
        else 
            $(e.currentTarget).toggleClass("open",true);
        e.preventDefault(); 
        return false;
    });

    //  suppressing default bahavior
    $(".dropdown").on("hide.bs.dropdown", doNothing);            
    $(".dropdown").on("show.bs.dropdown", doNothing);

    function doNothing(e) {
        e.preventDefault(); 
        return false;
    }
});
                        
这篇关于Keep-bootstrap-3-dropdown-when-clicked的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！