javascript - jQuery 脚本的正确顺序？隐藏/显示功能在实时版本中不起作用，但可以作为独立的 fiddle 使用

Question

我有几个正常工作的 jQuery 函数 - 绑定(bind)到页面滚动的固定 Logo 和导航菜单的淡入，以及绑定(bind)到 (document).ready 的 Firefox 的灯箱和滚动条修复。

我正在尝试添加隐藏和/或显示几个与点击相关的 div 的功能。

作为一个独立的功能，我让它像 fiddle 一样正常工作......

Working JSFiddle Here

问题是我正在学习 jQuery，我不确定在页面底部的脚本中调用函数的正确顺序是什么。

我的逻辑告诉我将它包含在 (document).ready 部分下，但是当我从 fiddle 中插入工作脚本时，它不仅不起作用而且还搞砸了我的其余功能。

没有隐藏/显示功能的当前工作脚本(根据评论更新):

<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
    $(".main-links").fadeIn();
    $(".header-logo").fadeIn();

} else {
    $(".main-links").hide();
    $(".header-logo").hide();

    }
});

$(document).ready(function(){
    $('.lightbox').nivoLightbox();
    $('.scroll-pane').jScrollPane();
    $('.scroll-pane2').jScrollPane();
});
</script>   

我尝试插入附加功能的方式是这样的:

<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
    $(".main-links").fadeIn();
    $(".header-logo").fadeIn();

} else {
    $(".main-links").hide();
    $(".header-logo").hide();

    }
});

$(document).ready(function(){
    $('.lightbox').nivoLightbox();
    $('.scroll-pane').jScrollPane();
    $('.scroll-pane2').jScrollPane();

    $('#menu-switch1').on('click', function(event) {        
       $('#main-tasting-menu').toggle('show');
       $('#dessert-tasting-menu').toggle('hide');   
   });

   $('#menu-switch2').on('click', function(event) {        
     $('#main-tasting-menu').toggle('hide');
     $('#dessert-tasting-menu').toggle('show');

});
</script>   

当我执行此操作时，切换功能无法像在我的 fiddle 中那样工作，它杀死了我的 scroll-pane2 并添加了一个不应出现在 .scroll-pane1 上的水平滚动条。

是否因为我对 jQuery 的了解不足而忽略了一些明显的东西？

HTML 部分(脚本 list ？):

<script src="js/nivo-lightbox.min.js"></script>
    <link href="css/nivo-lightbox.css" rel="stylesheet" type="text/css" media="screen">
    <link href="themes/default/default.css" rel="stylesheet" type="text/css" media="screen">



    <!-- jScrollPane CSS for Firefox scrollbar fix (applied to all browsers) -->
    <link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" media="screen"> 
    <!-- Mousewheel support for jScrollPane scrollbar fix for FireFox and IE -->
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <!-- the jScrollPane script -->
    <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

Answer 1

首先，当您为 #menu-switch 添加点击处理程序时，您的示例中存在语法错误。您需要关闭函数和对 live 的调用，如下所示。注意额外的 }) 关闭对 live() 的每次调用。

$(document).ready(function(){

    $('.lightbox').nivoLightbox();
    $('.scroll-pane').jScrollPane();
    $('.scroll-pane2').jScrollPane();

    $('#menu-switch1').live('click', function(event) {        
       $('#main-tasting-menu').toggle('show');
       $('#dessert-tasting-menu').toggle('hide');
    });  

   $('#menu-switch2').live('click', function(event) {        
     $('#main-tasting-menu').toggle('hide');
     $('#dessert-tasting-menu').toggle('show');
   });

});

还有一些您可能需要考虑的事项。您需要将所有内容包装在 $(document).ready() 调用中，因为这将确保 jQuery 和 DOM 已准备好执行操作。正如 charlietfl 在上面的评论中提到的，live() 方法 was deprecated in version 1.7 .如果您使用的版本 > 1.7，那么您需要使用 on() 代替。这是整个事情的更新版本。

$(document).ready(function(){

  // Cache the items you need to use inside different functions.
  // This is so that you don't have to call the jQuery method
  // on every user action.
  var $mainLinks = $('.main-links');
  var $headerLogo = $('.header-logo');
  var $mainTastingMenu = $('#main-tasting-menu');
  var $dessertTastingMenu = $('#dessertTastingMenu');
  var $menuSwitch_1 = $('#menu-switch1');
  var $menuSwitch_2 = $('#menu-switch2');

  // Setup your plugins
  $('.lightbox').nivoLightbox();
  $('.scroll-pane').jScrollPane();
  $('.scroll-pane2').jScrollPane();

  // Setup your event handlers

  $menuSwitch_1.on('click', function(event) {
    $mainTastingMenu.toggle('show');
    $dessertTastingMenu.toggle('hide');
  });

  $menuSwitch_2.on('click', function(event) {        
    $mainTastingMenu.toggle('hide');
    $dessertTastingMenu.toggle('show');
  });

  // I made this handler match the ones above for consistency
  $(window).on('scroll', function(event) {

    if ($(this).scrollTop() > 200) {

      $mainLinks.fadeIn();
      $headerLogo.fadeIn();

    } else {

      $mainLinks.hide();
      $headerLogo.hide();
    }

  });

});