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

Proper order of jQuery script? Hide/Show function not working in live version but works as stand alone Fiddle

本文关键字：不起作用 版本 实时 但可以 使用 Fiddle 独立 功能 顺序 脚本 显示      更新时间：2023-09-26

我有几个jQuery函数工作正常-一个固定徽标和导航菜单的fadeIn绑定到页面滚动，以及一个用于Firefox的灯箱和滚动条修复绑定到（document）.ready。

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

作为一个独立的功能，我让它像小提琴一样正常工作。。。

在这里工作JSFiddle

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

我的逻辑告诉我将其包含在（document）.ready部分下，但当我从小提琴插入工作脚本时，它不仅不起作用，而且会破坏我的其余功能。

当前没有隐藏/显示功能的工作脚本（根据注释更新）：

<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>

当我这样做的时候，切换不会像在我的小提琴里那样工作，它会杀死我的滚动条2，并添加一个不应该在.woll-pane1上的水平滚动条。

有没有因为我对jQuery的糟糕了解而明显忽略了什么？

HTML部分（脚本清单？）：

<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>

首先，在为#menu-switch添加单击处理程序时，您的示例中出现语法错误。你需要关闭函数和调用才能激活，如下所示。请注意，额外的})关闭了对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()方法在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();
    }
  });
});
相关文章：