Jquery添加单击以向上滑动面板？

Question

我有以下幻灯片面板，我使用教程等拼凑在一起......

$(document).ready(function() {

$(".dropdown dt a").click(function() {
    $(".dropdown dd #panel").slideDown(150);
});

$(".dropdown dd #panel a").click(function() {

    $(".dropdown dd #panel").slideUp(150);

});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
}); 

});

但是我不知道如何点击来调出面板。

当前您单击面板会向下滑动，您进入面板然后退出面板会向上滑动。

我想补充一点，一旦你点击了显示面板，你也可以点击关闭它？

所以你有两种方法可以关闭它，将鼠标移开，或再次单击按钮。也许添加一个活动类，这样我就可以有一个箭头或改变打开然后关闭的东西？

有人帮我添加点击后退功能吗？

如果可以的话非常感谢:)

Thanks guys.

Brian 尝试添加您的代码，但设法完全破坏它，我显然没有把它放在正确的位置:(

编辑

正在添加 Brians 的建议...

$(document).ready(function() {



$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasclass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});         


$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
}); 

});

Answer 1

您需要跟踪面板的状态，因为您有两个关闭触发器（因此一个简单的切换侦听器是不够的）。您可以添加一个 js 变量（好的，但不是很好）或使用一个类（更好）来跟踪它。然后有条件地测试您的点击侦听器以确定要做什么：

$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasClass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});

只需确保将 removeClass 方法也添加到内部锚标记上的关闭侦听器中：

$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});

Answer 2

看看例子 4a http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/