Question

拔掉我的头发试图让这个工作。当浏览器缩小到移动大小时，响应式菜单工作正常，即，单击链接关闭菜单，页面滚动到正确的部分。当我在谷歌开发工具中启用触摸仿真时，我可以看到数据切换=＆＃34;崩溃＆＃34;没有被解雇，所以菜单在点击时保持打开状态。现在，在这里，我买了一个主题，并且有很多额外的js写的是谁创造了它很可能导致这个问题。主题不再受支持，所以我真的卡住了。

我的菜单代码：

<div class="header" id="header">

  <div class="navbar-wrapper" id="navigation" role="navigation">

    <div class="navbar navbar-inverse">

      <div class="container">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-down">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
         </button>

            <a class="navbar-brand brand-container " href="#home" title="CandyPOP!" rel="home" id="brand" > <img src="img/logocp1bcolour2.png" alt="CandyPOP logo" class="firstb" width="160"> 
        <!-- logo to display on scrolling --> 
            <img src="img/logocp1bcolour2.png" alt="CandyPOP logo" class="last" width="160"> </a>

        <div class="navbar-collapse collapse" id="navbar-collapse-down">

          <ul id="nav" class="nav navbar-nav">
            <li class ="active"><a href="#home" data-spy="#home" data-toggle="collapse" data-target="#navbar-collapse-down">Home<span></span></a></li>
            <li><a href="#portfolio" data-spy="#portfolio" data-toggle="collapse" data-target="#navbar-collapse-down">Line Up<span></span></a></li>
            <li><a href="#tickets" class="menu-item" data-spy="#tickets" data-toggle="collapse" data-target="#navbar-collapse-down">Tickets<span></span></a></li>
            <li><a href="#blog" class="menu-item" data-spy="#blog" data-toggle="collapse" data-target="#navbar-collapse-down">News<span></span></a></li>
            <li><a href="#contact" data-spy="#contact" data-toggle="collapse" data-target="#navbar-collapse-down">Contact<span></span></a></li>
          </ul>

        </div>

      </div>

    </div>

  </div>

</div>

以下是与主题一起出现的所有菜单相关的js：

var lastId,
        topMenuHeight,
        topMenu = $('#nav'), 
        menuItems = topMenu.find('a'),
        menuItemsTop = topMenu.find('> li > a'),
        scrollItems = menuItemsTop.map(function(){
            var item = $($(this).data('spy'));
            if (item.length) { return item; }
        });

    if ($('body').hasClass('leftnav')){ 
        topMenuHeight = 0;
    } else {
        topMenuHeight = 50;
    }

    menuItems.not('.external-link').on('click touchend',function(e) {
        e.preventDefault();
        var target = $(this).attr('href');      

        if (!$(this).parent().parent().hasClass('dropdown-menu')){
            $(this).parent().siblings().removeClass('active');
        }

        $(this).data('clicked', true);

        // If the url item is defined, this for dropdowns   
        if ( typeof ( $(target).offset() ) !== 'undefined'){
            $('html,body').stop().animate({ 
                scrollTop: $(target).offset().top - topMenuHeight
            }, '1000' ,'easeOutExpo');
        }
    });

     // Drop down navigation    
     $('.dropdown-menu li a').click(function(){
            var j = $(this).parent().index();

            var subnavigation = $(this).closest('ul').data('subnav');

            $('#'+ subnavigation + ' li').removeClass('active');
            $('#'+ subnavigation + ' li').each(function(i){
                if ( j  ===  i){
                    $(this).addClass('active');
                }
            })

            var target =  $('#'+ subnavigation + ' li').closest('.parent');

            $('html,body').stop().animate({
                scrollTop: target.offset().top - topMenuHeight
            }, '1000' ,'easeOutExpo');
        })

    // Scroll on click links
    $('.link-more[href*=#]').click(function(e){
            e.preventDefault();

            var target = $(this.hash);

            $('html,body').stop().animate({
                scrollTop: target.offset().top - topMenuHeight
            }, '1000' ,'easeOutExpo');
        })

    // Scroll to the section clicked on navigation
    $(window).scroll(function(){    
        var fromTop =  $(this).scrollTop() + topMenuHeight;     
        var cur = scrollItems.map(function(){
            if($(this).offset().top < fromTop + 1)
                return this;
        });

       cur = cur[cur.length-1];

       var id = cur && cur.length ? cur[0].id : '';

      if (lastId !== id) {
           lastId = id;

           menuItemsTop
             .parent().removeClass('active')
             .end().filter("[data-spy=#"+id+"]").parent().addClass("active");     
       }
    })


    $('.navbar-toggle').on('click', function(e){
        $('.nav').toggle();
    });

我还复制了js中的最后几行并将其更改为从.menu-item触发，如下所示：

$('.menu-item').on('click', function(e){
        $('.nav').toggle();
    });

如果有人愿意帮助我，我将非常感激。干杯

Bootstrap菜单在触摸设备上不会关闭

0 个答案: