jQuery滑块问题：两个按钮对状态感到困惑答案

【问题标题】：jQuery slider problems: two buttons are getting confused about the statejQuery滑块问题：两个按钮对状态感到困惑
【发布时间】：2009-12-23 22:08:47
【问题描述】：

我已经构建了一个滑块，它有两个可能的按钮：一个到.toggle，这个总是可见的，然后是.click，一个只有在幻灯片打开时才可见，所以我希望它只关闭。问题是当您使用 .toggle 打开并使用 .click 关闭时，然后尝试使用原始 .toggle 按钮重新打开。此时需要点击 2 次鼠标。

<script type="text/javascript">

  $(document).ready(function(){

    $(".profile_slide_btn").toggle(

     function(){
       $("#sliding_header").animate({ 
         top: "0px"
       }, 300 );
     }, 

     function(){
      $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
  });

 $(".profile_slide_btn2").click(

     function(){
       $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
     });
  });

</script>

感谢您的帮助！！

【问题讨论】：

标签： jquery toggle reset

【解决方案1】：

我认为问题在于切换运行一个功能，然后运行另一个，所以因为您使用 .click 关闭，但切换不知道，当您再次单击 .toggle 时，它会尝试先关闭。

可能必须更改您的逻辑以手动进行切换，而不是依赖.toggle 函数。

编辑：像这样（请注意，这是未经测试的，您可能会遇到在动画过程中点击东西会导致奇怪的问题）：

<script type="text/javascript">

    $(document).ready(function(){

        $(".profile_slide_btn").click(
            function(){
                if ($("#sliding_header").css("top") == "0px") {
                    hideHeader();
                } else {
                    showHeader();
                }
            });

        $(".profile_slide_btn2").click(hideHeader);

        function showHeader() {
            $("#sliding_header").animate({ top: "0px" }, 300 );
        }

        function hideHeader() {
            $("#sliding_header").animate({ top: "-600px" }, 300 );
        }
    });

</script>

【讨论】：

这听起来对我来说，我不是很精通我的语法。你会怎么写？

【解决方案2】：

这是因为 .toggle 不知道滑块已关闭。

用工具打开：0px
点击关闭：-600px
Toggle 仍然认为你打算关闭，所以：-600px 再次

使用 if 可以知道滑块的 top 属性何时为 -600px，何时为 0，这样您就知道何时关闭以及何时打开。

【讨论】：

你有没有关于使用'if'的资源，我还是有点绿。