jquery - 单击时保持 bootstrap-3-dropdown-open

Question

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

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

Bootstrap Dropdowns - dropdown.js

jsfiddle Link

请帮忙。

Answer 1

Updated fiddle

您只需进行一项更改:

而不是仅监听 .dropdown.active 的 hide.bs.dropdown 事件将事件处理程序应用于 .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;
    }
});