jQuery 滑块问题：两个按钮的状态变得混乱

发布于 2024-08-16 10:30:02 字数 724 浏览 5 评论 0原文

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

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

感谢您的帮助！

原文

I have built a slider that has two possible buttons: one to .toggle, this one is always visible, and then the .click one which is only visable when the slide is open so i wanted it to only close. the problem is when you open with the .toggle and close with the .click then try to re-open with the original .toggle button. it needs 2 clicks of the mouse at that point.

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

Thanks for any help!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看轻我的陪伴 2024-08-23 10:30:02

我认为问题在于切换运行一个功能&然后是另一个，因为您使用 .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>

I think the issue is that the toggle runs one function & then the other, so because you closed with the .click, but the toggle doesn't know that, when you click the .toggle again, it tries to close first.

Might have to change your logic to manually do the toggle instead of relying on the .toggle function.

Edit: So something like this (note this is untested & you may have issues where clicking things during the animation cause weirdness):

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

回复收藏 0 原文