Keep-bootstrap-3-dropdown-open-when-clicked

Posted 2023-03-06

【中文标题】Keep-bootstrap-3-dropdown-open-when-clicked

【英文标题】：

【发布时间】：2014-03-08 18:37:39

【问题描述】：

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

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

Bootstrap Dropdowns - dropdown.js

jsfiddle Link

请帮忙。

【参考方案1】：

Updated fiddle

您只需进行一项更改：

而不是只收听hide.bs.dropdown 事件.dropdown.active 将事件处理程序应用于.dropdown。

基本上，改变：

$(".dropdown.active").on("hide.bs.dropdown",function(e)

到：

$(".dropdown").on("hide.bs.dropdown",function(e)

---

编辑： 为了覆盖默认的下拉行为，您需要忽略active 状态，因为多个li 元素可以保持展开状态，您需要自己切换可见性。

Here's the updated demo

代码：

$(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;
    
);

【讨论】：

感谢您的帮助，我试了一下并更新了 jsfiddle。问题是它使一切都变得活跃。你能帮我做同样的事情吗？

修复它：未捕获的 ReferenceError：e 未定义。只需更改“function doNothing(e) ”

谢谢你，实际上我为电子商务大型菜单使用了多级下拉菜单，在移动设备中默认hide.bs.dropdown 行为导致页面向上滚动，因此我们希望在打开下拉菜单后保持打开状态并允许用户在单击下拉列表本身时关闭。最初我尝试了this 和this，但您的回答有所帮助。

【参考方案2】：

不确定它是否正确，但我做到了

$(function()
  $('.nav').find('li.dropdown.active').addClass('open');
  $(".dropdown").on("hide.bs.dropdown",function(e) 
        e.preventDefault(); 
        return false;
   );
  $('.navbar-main li').on('click', function ()
    var me = $(this);
    $('.navbar-main li').removeClass('open');
    $(this).addClass('open');
  );
);

它的工作正常:)