0

如您所见，有一个使用 jquery 的滑动面板，它通过悬停功能进行动画处理。所以，我想要一个 clcik 函数来打开和关闭这个面板。如果我在下面的代码中将“悬停”替换为“单击”，面板会打开，但我不知道如何使其关闭......所以面板保持打开状态......

`    
        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 上看到它的运行情况）

4

2 回答 2

1

我的和 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只是为单击事件提供其自己的标识符的一种方式，这样以后我们就可以$("html").off("click.anywhere");并且不会破坏我们/插件可能已经完成的任何其他事件绑定:)

编辑：我刚刚注意到您在您的网站上运行 jQuery v1.3.2，此代码不适用于该版本，我很抱歉......您最初可能应该提到这一点。:) 最新版本的 jQuery 有巨大的速度改进。如果您无法升级，则必须稍等片刻，以便我们将答案转换为该版本。

于 2013-09-04T01:24:37.143 回答
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;
        }
    });
});
于 2013-09-04T01:01:45.000 回答