Question

我有一个折叠智能手机和平板电脑的菜单：

<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#tf-home" class="page-scroll"><img class="toplogo" src="img/logotop.png" alt="Top Logo"></a>
    </div>
    <a id="menuButton" href="#">Menu</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#tf-home" class="page-scroll">Home</a></li>
        <li><a href="#tf-about" class="page-scroll">About</a></li>
        <li><a href="#tf-team" class="page-scroll">Team</a></li>
        <li><a href="#tf-services" class="page-scroll">Services</a></li>
        <li><a href="#tf-works" class="page-scroll">Gallery</a></li>
        <li><a href="#tf-testimonials" class="page-scroll">References</a></li>
        <li><a href="#tf-contact" class="page-scroll">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

当用户在可折叠菜单的任何链接上进行cliks时，我想使用jQuery向上滑动可折叠菜单。它工作正常但只有一次！在那之后，如果我点击一个菜单，它就不再打开了！？我错过了什么？

这是jQuery代码：

function main（）{

（function（）{ 'use strict';

/ * ============================================= = 见证滑块 =============================================== * / < / p>

$('a.page-scroll').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 40
        }, 900);
        return false;
      }
    }
  });

/*====================================
Show Menu on Book
======================================*/
$(window).bind('scroll', function() {
    var navHeight = $(window).height() - 600; /* This value was 200 but it was causing problems in different resolutions. */
    if ($(window).scrollTop() > navHeight) {
        $('.navbar-default').addClass('on');
    } else {
        $('.navbar-default').removeClass('on');
    }
});

$(function(){
    $(".navbar-nav a, #menuButton").click(function(){
        $(".navbar-collapse").slideToggle();
    });
});

$('body').scrollspy({ 
    target: '.navbar-default',
    offset: 80
})

$(document).ready(function() {
  $("#team").owlCarousel({

      navigation : false, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      autoHeight : true,
      itemsCustom : [
                    [0, 1],
                    [450, 2],
                    [600, 2],
                    [700, 2],
                    [1000, 4],
                    [1200, 4],
                    [1400, 4],
                    [1600, 4]
                  ],
  });

  $("#clients").owlCarousel({

      navigation : false, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      autoHeight : true,
      itemsCustom : [
                    [0, 1],
                    [450, 2],
                    [600, 2],
                    [700, 2],
                    [1000, 4],
                    [1200, 5],
                    [1400, 5],
                    [1600, 5]
                  ],
  });

  $("#testimonial").owlCarousel({
    navigation : false, // Show next and prev buttons
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem:true
    });

});

/*====================================
Portfolio Isotope Filter
======================================*/
$(window).load(function() {
    var $container = $('#lightbox');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
    $('.cat a').click(function() {
        $('.cat .active').removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        return false;
    });

});

}（））;

} 主（）;

Answer 1

您

<a href="#" id="showMEnu">showMenu</a>
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#tf-home" class="page-scroll">Home</a></li>
    <li><a href="#tf-about" class="page-scroll">About</a></li>
    <li><a href="#tf-team" class="page-scroll">Team</a></li>
    <li><a href="#tf-services" class="page-scroll">Services</a></li>
    <li><a href="#tf-works" class="page-scroll">Gallery</a></li>
    <li><a href="#tf-testimonials" class="page-scroll">References</a></li>
    <li><a href="#tf-contact" class="page-scroll">Contact</a></li>
  </ul>
</div>

将完全崩溃..所以没有任何东西可以点击了试试这个..

$("#showMEnu").click(function(){
    $(".navbar-collapse").slideDown();
});

Answer 2

创建一个菜单按钮，然后将其绑定到使用slideToggle

的事件

我认为这就是你想要的。

<强> HTML

<a id="menuButton" href="#">Menu</a>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
    <li><a href="#tf-home" class="page-scroll">Home</a></li>
    <li><a href="#tf-about" class="page-scroll">About</a></li>
    <li><a href="#tf-team" class="page-scroll">Team</a></li>
    <li><a href="#tf-services" class="page-scroll">Services</a></li>
    <li><a href="#tf-works" class="page-scroll">Gallery</a></li>
    <li><a href="#tf-testimonials" class="page-scroll">References</a></li>
    <li><a href="#tf-contact" class="page-scroll">Contact</a></li>
  </ul>
</div>

<强>的jQuery

$(function(){
    $(".navbar-nav a, #menuButton").click(function(){
        $(".navbar-collapse").slideToggle();
    });
});

确保将菜单按钮放在菜单容器.navbar-collapse

之外

使用jsFiddle here

Answer 3

我认为那就是你想要的东西

$(function(){
$(".navbar-toggle").click(function(){
    $(".navbar-collapse").slideToggle();
});
});

$(function(){
$(".navbar-nav a").click(function(){
    $(".navbar-collapse").slideUp();
});
});

jQuery不会在.slideUp之后工作

3 个答案: