Bootstrap 3点击标签时丢失了下拉菜单

Question

我创建了一个下拉菜单;我遇到了如下问题：

当我试图点击像ALL或FILM这样的标签时，它会关闭所有元素。

我必须再次点击按钮PRODUCT.dropdown-toggle重新打开。

我的示例代码：

var App = function() { 
 
    return { 
 
     //Animate Dropdown 
 
     initAnimateDropdown: function() { 
 
      function MenuMode() { 
 
       jQuery('.dropdown').on('show.bs.dropdown', function (e) { 
 
        jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
 
       }); 
 
       jQuery('.dropdown').on('hide.bs.dropdown', function (e) { 
 
        jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
 
       }); 
 
      } 
 

 
      jQuery(window).resize(function() { 
 
       if (jQuery(window).width() > 768) { 
 
        MenuMode(); 
 
       } 
 
      }); 
 

 
      if (jQuery(window).width() > 768) { 
 
       MenuMode(); 
 
      } 
 
     }, 
 

 
    }; 
 

 
}();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<li class="dropdown mega-menu-fullwidth active open"> 
 
    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">PRODUCT 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
    <li> 
 
     <div class="mega-menu-content disable-icons"> 
 
     <div class="container" style="width: 100%"> 
 
      <div class="row equal-height"> 
 
      <div class="col-sm-12 no-padding"> 
 
       <div class="listproductmenu"> 
 
       <ul class="nav nav-tabs" id="myTab"> 
 
        <li class=""> 
 
        <a data-toggle="tab" href="#tab-0" aria-expanded="false"> 
 
        ALL 
 
        </a> 
 
        </li> 
 
        <li class=""> 
 
        <a data-toggle="tab" href="#tab-1" aria-expanded="false"> 
 
        FILM 
 
        </a> 
 
        </li> 
 
        <li class="active"> 
 
        <a data-toggle="tab" href="#tab-2" aria-expanded="true"> 
 
        MUSIC 
 
        </a> 
 
        </li> 
 
       </ul> 
 
       <div class="tab-content" style="padding: 20px"> 
 
        <div id="tab-0" class="tab-pane fade"> 
 
        <div class="row"> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Sonata"> 
 
         Sonata 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Elantra"> 
 
         Elantra 
 
         </a> 
 
         </div> 
 
        </div> 
 
        </div> 
 
        <div id="tab-1" class="tab-pane fade"> 
 
        <div class="row"> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Sonata"> 
 
         Sonata 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Elantra"> 
 
         Elantra 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Accent"> 
 
         Accent 
 
         </a> 
 
         </div> 
 
        </div> 
 
        </div> 
 
        <div id="tab-2" class="tab-pane fade active in"> 
 
        <div class="row"> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/santa-fe"> 
 
         Santa Fe 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Tucson"> 
 
         Tucson 
 
         </a> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</li>

Answer 1

所有你需要的是stopPropagation上单击事件处理程序。

$(document).on('click', '.dropdown-menu', function (e) { 
    e.stopPropagation(); 
}); 

stopPropagation阻止事件向上冒泡DOM树，从而防止任何父处理程序从被通知的事件。

见参考文献here

$(document).on('click', '.dropdown-menu', function (e) { 
 
    e.stopPropagation(); 
 
}); 
 
var App = function() { 
 
    //Fixed Header 
 
    function handleHeader() { 
 
     jQuery(window).scroll(function() { 
 
      if (jQuery(window).scrollTop() > 100) { 
 
       jQuery(".header-fixed .header-sticky").addClass("header-fixed-shrink"); 
 
      } 
 
      else { 
 
       jQuery(".header-fixed .header-sticky").removeClass("header-fixed-shrink"); 
 
      } 
 
     }); 
 
    } 
 

 
    //Testing the Header for Smooth Scrolling 
 
    function handleTestHeader() { 
 
     jQuery(window).scroll(function() { 
 
      if (jQuery(window).scrollTop()) { 
 
       jQuery(".header-fixed .header-sticky").addClass("header-fixed-shrink"); 
 
      } 
 
      else { 
 
       jQuery(".header-fixed .header-sticky").removeClass("header-fixed-shrink"); 
 
      } 
 
     }); 
 
    } 
 

 
    //Header Mega Menu 
 
    function handleMegaMenu() { 
 
     jQuery(document).on('click', '.mega-menu .dropdown-menu', function (e) { 
 
      e.stopPropagation(); 
 
     }) 
 
    } 
 

 
    //Search Box (Header) 
 
    function handleSearch() { 
 
     jQuery('.search').click(function() { 
 
      if (jQuery('.search-btn').hasClass('fa-search')) { 
 
       jQuery('.search-open').fadeIn(500); 
 
       jQuery('.search-btn').removeClass('fa-search'); 
 
       jQuery('.search-btn').addClass('fa-times'); 
 
      } else { 
 
       jQuery('.search-open').fadeOut(500); 
 
       jQuery('.search-btn').addClass('fa-search'); 
 
       jQuery('.search-btn').removeClass('fa-times'); 
 
      } 
 
     }); 
 
    } 
 

 
    //Search Box v1 (Header v5) 
 
    function handleSearchV1() { 
 
     jQuery('.header-v5 .search-button').click(function() { 
 
      jQuery('.header-v5 .search-open').slideDown(); 
 
     }); 
 

 
     jQuery('.header-v5 .search-close').click(function() { 
 
      jQuery('.header-v5 .search-open').slideUp(); 
 
     }); 
 

 
     jQuery(window).scroll(function() { 
 
      if (jQuery(this).scrollTop() > 1) jQuery('.header-v5 .search-open').fadeOut('fast'); 
 
     }); 
 
    } 
 

 
    //Sidebar Navigation Toggle 
 
    function handleToggle() { 
 
     jQuery('.list-toggle').on('click', function() { 
 
      jQuery(this).toggleClass('active'); 
 
     }); 
 

 
     /* 
 
     jQuery('#serviceList').on('shown.bs.collapse'), function() { 
 
      jQuery(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down'); 
 
     } 
 

 
     jQuery('#serviceList').on('hidden.bs.collapse'), function() { 
 
      jQuery(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up'); 
 
     } 
 
     */ 
 
    } 
 

 
    //Equal Height Columns  
 
    function handleEqualHeightColumns() { 
 
     var EqualHeightColumns = function() { 
 
      $(".equal-height-columns").each(function() { 
 
       heights = []; 
 
       $(".equal-height-column", this).each(function() { 
 
        $(this).removeAttr("style"); 
 
        heights.push($(this).height()); // write column's heights to the array 
 
       }); 
 
       $(".equal-height-column", this).height(Math.max.apply(Math, heights)); //find and set max 
 
      }); 
 
     } 
 

 
     EqualHeightColumns(); 
 
     $(window).resize(function() { 
 
      EqualHeightColumns(); 
 
     }); 
 
     $(window).load(function() { 
 
      EqualHeightColumns("img.equal-height-column"); 
 
     }); 
 
    } 
 

 
    //Hover Selector 
 
    function handleHoverSelector() { 
 
     $('.hoverSelector').on('hover', function (e) { 
 
      $('.hoverSelectorBlock', this).toggleClass('show'); 
 
      e.stopPropagation(); 
 
     }); 
 
    } 
 

 
    //Bootstrap Tooltips and Popovers 
 
    function handleBootstrap() { 
 
     /*Bootstrap Carousel*/ 
 
     jQuery('.carousel').carousel({ 
 
      interval: 15000, 
 
      pause: 'hover' 
 
     }); 
 

 
     /*Tooltips*/ 
 
     jQuery('.tooltips').tooltip(); 
 
     jQuery('.tooltips-show').tooltip('show'); 
 
     jQuery('.tooltips-hide').tooltip('hide'); 
 
     jQuery('.tooltips-toggle').tooltip('toggle'); 
 
     jQuery('.tooltips-destroy').tooltip('destroy'); 
 

 
     /*Popovers*/ 
 
     jQuery('.popovers').popover(); 
 
     jQuery('.popovers-show').popover('show'); 
 
     jQuery('.popovers-hide').popover('hide'); 
 
     jQuery('.popovers-toggle').popover('toggle'); 
 
     jQuery('.popovers-destroy').popover('destroy'); 
 
    } 
 

 
    return { 
 
     init: function() { 
 
      handleBootstrap(); 
 
      handleSearch(); 
 
      handleSearchV1(); 
 
      handleToggle(); 
 
      handleHeader(); 
 
      handleTestHeader(); 
 
      handleMegaMenu(); 
 
      handleHoverSelector(); 
 
      handleEqualHeightColumns(); 
 
     }, 
 

 
     //Scroll Bar 
 
     initScrollBar: function() { 
 
      jQuery('.mCustomScrollbar').mCustomScrollbar({ 
 
       theme: "minimal", 
 
       scrollInertia: 300, 
 
       scrollEasing: "linear" 
 
      }); 
 
     }, 
 

 
     //Counters 
 
     initCounter: function() { 
 
      jQuery('.counter').counterUp({ 
 
       delay: 10, 
 
       time: 1000 
 
      }); 
 
     }, 
 

 
     //Parallax Backgrounds 
 
     initParallaxBg: function() { 
 
      jQuery(window).load(function() { 
 
       jQuery('.parallaxBg').parallax("50%", 0.2); 
 
       jQuery('.parallaxBg1').parallax("50%", 0.4); 
 
      }); 
 
     }, 
 

 
     //Animate Dropdown 
 
     initAnimateDropdown: function() { 
 
      function MenuMode() { 
 
       jQuery('.dropdown').on('show.bs.dropdown', function (e) { 
 
        jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
 
       }); 
 
       jQuery('.dropdown').on('hide.bs.dropdown', function (e) { 
 
        jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
 
       }); 
 
      } 
 

 
      jQuery(window).resize(function() { 
 
       if (jQuery(window).width() > 768) { 
 
        MenuMode(); 
 
       } 
 
      }); 
 

 
      if (jQuery(window).width() > 768) { 
 
       MenuMode(); 
 
      } 
 
     }, 
 

 
    }; 
 

 
}();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<li class="dropdown mega-menu-fullwidth active open"> 
 
    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">PRODUCT 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
    <li> 
 
     <div class="mega-menu-content disable-icons"> 
 
     <div class="container" style="width: 100%"> 
 
      <div class="row equal-height"> 
 
      <div class="col-sm-12 no-padding"> 
 
       <div class="listproductmenu"> 
 
       <ul class="nav nav-tabs" id="myTab"> 
 
        <li class=""> 
 
        <a data-toggle="tab" href="#tab-0" aria-expanded="false"> 
 
        ALL 
 
        </a> 
 
        </li> 
 
        <li class=""> 
 
        <a data-toggle="tab" href="#tab-1" aria-expanded="false"> 
 
        FILM 
 
        </a> 
 
        </li> 
 
        <li class="active"> 
 
        <a data-toggle="tab" href="#tab-2" aria-expanded="true"> 
 
        MUSIC 
 
        </a> 
 
        </li> 
 
       </ul> 
 
       <div class="tab-content" style="padding: 20px"> 
 
        <div id="tab-0" class="tab-pane fade"> 
 
        <div class="row"> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Sonata"> 
 
         Sonata 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Elantra"> 
 
         Elantra 
 
         </a> 
 
         </div> 
 
        </div> 
 
        </div> 
 
        <div id="tab-1" class="tab-pane fade"> 
 
        <div class="row"> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Sonata"> 
 
         Sonata 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Elantra"> 
 
         Elantra 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Accent"> 
 
         Accent 
 
         </a> 
 
         </div> 
 
        </div> 
 
        </div> 
 
        <div id="tab-2" class="tab-pane fade active in"> 
 
        <div class="row"> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/santa-fe"> 
 
         Santa Fe 
 
         </a> 
 
         </div> 
 
         <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;"> 
 
         <a href="/product/Tucson"> 
 
         Tucson 
 
         </a> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</li>