Bootstrap下拉菜单仅在移动设备上关闭整个菜单

时间:2018-12-07 17:33:29

标签: javascript jquery css html5 twitter-bootstrap

晚上!我在使用Bootstrap菜单时遇到问题:仅在移动设备上(仅在Apple设备上),只要您单击Bootstrap下拉菜单,它就会关闭整个菜单。然后,当您再次单击“汉堡包”按钮时,下拉列表将展开。当我缩小窗口大小时,在Chrome,Firefox或Safari上不会发生这种情况。

<nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="primary">
                    <div class="desktop-nav">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="http://latva.itwebdev.net" class="link-logo"><img class="logo img-responsive img-left" src="http://latva.itwebdev.net/wp-content/uploads/2018/11/logo.png" alt="Logo" />
                            <h1>Latva Machine, Inc.</h1>
                            </a>
                        </div>
                        <div id="navbar" class="collapse navbar-collapse"><ul id="menu-header" class="nav navbar-nav"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-51 current_page_item menu-item-has-children menu-item-111 dropdown active"><a title="Services" href="http://latva.itwebdev.net/services/" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">Services <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a title="CNC Machining" href="http://latva.itwebdev.net/services/cnc-machining/">CNC Machining</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a title="Casting &#038; Forging" href="http://latva.itwebdev.net/services/forging-casting/">Casting &#038; Forging</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-110 dropdown"><a title="Materials" href="http://latva.itwebdev.net/materials/" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">Materials <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-145" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-145"><a title="Titanium" href="http://latva.itwebdev.net/materials/titanium/">Titanium</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a title="Inconel®" href="http://latva.itwebdev.net/materials/inconel/">Inconel®</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"><a title="Molybdenum" href="http://latva.itwebdev.net/materials/molybdenum/">Molybdenum</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a title="Hastelloy®" href="http://latva.itwebdev.net/materials/hastelloy/">Hastelloy®</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a title="Monel®" href="http://latva.itwebdev.net/materials/monel/">Monel®</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-144"><a title="Stainless Steel" href="http://latva.itwebdev.net/materials/stainless-steel/">Stainless Steel</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-138"><a title="Aluminum" href="http://latva.itwebdev.net/materials/aluminum/">Aluminum</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-687" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-687"><a title="Nitronic 60" href="http://latva.itwebdev.net/materials/nitronic-60/">Nitronic 60</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-104 dropdown"><a title="Industries" href="http://latva.itwebdev.net/industries/" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">Industries <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a title="Aerospace" href="http://latva.itwebdev.net/industries/aerospace/">Aerospace</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"><a title="Military" href="http://latva.itwebdev.net/industries/military/">Military</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a title="High-Tech" href="http://latva.itwebdev.net/industries/high-tech/">High-Tech</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a title="Firearms" href="http://latva.itwebdev.net/industries/firearms/">Firearms</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a title="Contact Us" href="http://latva.itwebdev.net/contact-us/">Contact Us</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-147" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-147 dropdown"><a title="About Us" href="http://latva.itwebdev.net/about-us/" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">About Us <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301"><a title="Facilities &amp; Equipment" href="http://latva.itwebdev.net/about-us/facilities-equipment/">Facilities &#038; Equipment</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-572" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-572"><a title="Parts Gallery" href="http://latva.itwebdev.net/gallery/">Parts Gallery</a></li>
</ul>
</li>
</ul></div>    
                    </div>
                    <div class="mobile-nav">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-mobile" aria-expanded="false" aria-controls="navbar-mobile">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="http://latva.itwebdev.net" class="link-logo"><img class="logo img-responsive img-left" src="http://latva.itwebdev.net/wp-content/uploads/2018/11/logo.png" alt="Logo" />
                            <h1>Latva Machine, Inc.</h1>
                            </a>
                        </div>
                        <div id="navbar-mobile" class="collapse navbar-collapse"><ul id="menu-mobile" class="nav navbar-nav"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-642" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-642 dropdown"><a title="Services" href="#" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">Services <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-639" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-51 current_page_item menu-item-639 active"><a title="Services" href="http://latva.itwebdev.net/services/">Services</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-641" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-641"><a title="CNC Machining" href="http://latva.itwebdev.net/services/cnc-machining/">CNC Machining</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-640" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-640"><a title="Casting &#038; Forging" href="http://latva.itwebdev.net/services/forging-casting/">Casting &#038; Forging</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-644" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-644 dropdown"><a title="Materials" href="#" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">Materials <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-643" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-643"><a title="Materials" href="http://latva.itwebdev.net/materials/">Materials</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-645" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-645"><a title="Titanium" href="http://latva.itwebdev.net/materials/titanium/">Titanium</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a title="Inconel®" href="http://latva.itwebdev.net/materials/inconel/">Inconel®</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a title="Molybdenum" href="http://latva.itwebdev.net/materials/molybdenum/">Molybdenum</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a title="Hastelloy®" href="http://latva.itwebdev.net/materials/hastelloy/">Hastelloy®</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-649"><a title="Monel®" href="http://latva.itwebdev.net/materials/monel/">Monel®</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-650" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650"><a title="Stainless Steel" href="http://latva.itwebdev.net/materials/stainless-steel/">Stainless Steel</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-651" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-651"><a title="Aluminum" href="http://latva.itwebdev.net/materials/aluminum/">Aluminum</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-686" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-686"><a title="Nitronic 60" href="http://latva.itwebdev.net/materials/nitronic-60/">Nitronic 60</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-652" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-652 dropdown"><a title="Industries" href="#" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">Industries <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-657"><a title="Industries" href="http://latva.itwebdev.net/industries/">Industries</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-653" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-653"><a title="Aerospace" href="http://latva.itwebdev.net/industries/aerospace/">Aerospace</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-654" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-654"><a title="Military" href="http://latva.itwebdev.net/industries/military/">Military</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-655" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-655"><a title="High-Tech" href="http://latva.itwebdev.net/industries/high-tech/">High-Tech</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-656"><a title="Firearms" href="http://latva.itwebdev.net/industries/firearms/">Firearms</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-659" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-659"><a title="Contact Us" href="http://latva.itwebdev.net/contact-us/">Contact Us</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-661" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-661 dropdown"><a title="About Us" href="#" data-hover="dropdown" class="dropdown-toggle disabled" aria-haspopup="true">About Us <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-660" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-660"><a title="About Us" href="http://latva.itwebdev.net/about-us/">About Us</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-662" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-662"><a title="Facilities &amp; Equipment" href="http://latva.itwebdev.net/about-us/facilities-equipment/">Facilities &#038; Equipment</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-663" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-663"><a title="Parts Gallery" href="http://latva.itwebdev.net/gallery/">Parts Gallery</a></li>
</ul>
</li>
</ul></div>    
                    </div>                  
                </div>
            </div>
        </nav>

自定义JS:

(function($){
    //edit 2018-12-07
    //prevent mobile menu parent item anchoring or linking to show submenu
    $('ul#menu-mobile').on('click','a.dropdown-toggle.disabled',function(e){
        e.preventDefault();
        var parent = $(this).closest('li');
        var active = $('ul#menu-mobile li.show-submenu');
        if(active.length == 0){
            parent.addClass('show-submenu');
        }else{
            if(parent.hasClass('show-submenu')){
                parent.removeClass('show-submenu');
            }else{
                active.removeClass('show-submenu');
                parent.addClass('show-submenu');
            }
        }

    });
})(jQuery)
jQuery(document).ready(function($){
    jQuery('.carousel-showmanymoveone .item').each(function(){
        var itemToClone = $(this);

        for (var i=1;i<3;i++) {
            itemToClone = itemToClone.next();

        if (!itemToClone.length) {
            itemToClone = $(this).siblings(':first');
        }

        itemToClone.children(':first-child').clone()
            .addClass("cloneditem-"+(i))
            .appendTo($(this));
        }
    });

    jQuery('.carousel-showmanymoveone-1 .item').each(function(){
        var itemToClone = $(this);

        for (var i=1;i<2;i++) {
            itemToClone = itemToClone.next();

        if (!itemToClone.length) {
            itemToClone = $(this).siblings(':first');
        }

        itemToClone.children(':first-child').clone()
            .addClass("cloneditem-"+(i))
            .appendTo($(this));
        }
    });

    $('.show-hidden a').on('click' , function(){
        $(this).closest('.work').find('.load-hidden').css('display' , 'block');
        $(this).hide();
    });

    fixedMenu = function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop > 0){
            $('header nav').addClass('fixed-active');
        }else{
            $('header nav').removeClass('fixed-active');
        }
    };

    fixedMenu();

    $(window).on('scroll' , function(){
        fixedMenu();
    });
});

Site URL is here

编辑:Here's a video of the problem

0 个答案:

没有答案