保举-3-下拉-开放时，被点击

Question

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

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

Bootstrap Dropdowns - dropdown.js

jsfiddle Link

请帮忙。

Answer 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;
    }
});

Answer 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');
  });
});

及其正常工作：）