jQuery slider 问题 : two buttons are getting confused about the state

Question

我构建了一个 slider ，它有两个可能的按钮:一个是 .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>

感谢您的帮助!!

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