javascript - 单击选项卡时 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 prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

参见引用资料 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>