Question

如您所见，有一个使用jquery的幻灯片，它由悬停功能设置动画。所以，我想要一个clcik函数来打开和关闭这个面板。如果我在下面的代码中用“click”替换“hover”，面板会打开，但我不知道如何让它关闭......所以面板保持打开...

`    
        jQuery(document).ready(function() {
            $('#slide').hover(function () {
                $(this).animate({left:"-25px"},500);

            },function () {
                var width = $(this).width() -50;
                $(this).animate({left: - width  },500);  

            });

        });
     `

（你可以在www.zonevolley.com上看到它）

Answer 1

试试这个

var sliderIsOpen = false;
$(document).ready(function() {
    $('#slide').click(function () {
        if (sliderIsOpen == false)
            {
            $(this).animate({left:"-25px"},500);
            sliderIsOpen = true;
            }
        else
        {
            var width = $(this).width() -50;
            $(this).animate({left: - width  },500);
            sliderIsOpen = false;
        }
    });
});

Answer 2

我和Mikey代码的组合：要将面板悬停在打开状态，然后点击要关闭的任意位置：

var sliderIsOpen = false;
$(document).ready(function() {

  var $sidepanel = $("#slide");

  $sidepanel.on("mouseover.sidepanel", function (e) {
    $sidepanel.animate({left:"-25px"},500);
    sliderIsOpen = true;
  });



  $("html").on("click.anywhere", function(e) {
    if( !$(e.target).is( $sidepanel ) || 
       $(e.target).parents('#slide').length < 1 ) {

     var width = $sidepanel.width() -50;
     $sidepanel.animate({left: - width},500);
     sliderIsOpen = false;

    }
  });

});

这表示如果我们将鼠标放在面板上，那么它应该打开。如果我们点击页面并且目标不是#slide，或者我们点击的内容的父级不是#slide，那么我们将其关闭。

click.anywhere只是为click事件提供自己的标识符的方式，以后我们可以$("html").off("click.anywhere");，而不会破坏我们/插件可能已经完成的任何其他事件绑定：）

编辑：我刚刚注意到你在你的网站上运行jQuery v1.3.2，这段代码将不与该版本一起工作，我很抱歉......你或许最初应该提到这一点。 :)最新版本的jQuery具有巨大的速度提升。如果你无法升级，你将需要等待一段时间，以便我们可以将答案转换为该版本。

Jquery侧面板（点击关闭）

2 个答案: