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

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

$(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); 
}); 

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); 
}); 

---

})

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

$(".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方法添加到内部锚标记上的close listener：

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

---

请看示例4a

谢谢大家，我在Brian的上方添加了您的建议，但我成功地将其全部打断，我假设我将其放在了错误的位置：您可能需要将类名从“open”更改为“active”。我使用“open”进行演示。如果您想在JSFIDLE上发布一个快速演示，或者在这里发布足够多的标记和css，只要它关注这个特定问题，它将有助于调试。我还注意到我的代码片段中的打字错误，它应该是“hasClass”而不是“hasClass”。这就是我在没有调试器的情况下编写代码时会发生的情况…再次感谢Brian，我已经在这里放置了所有适当的位。。。现在仍然没有下滑：很抱歉。。。我的密码有点错误。我把你的例子放在这里，让它发挥作用。。。我在调试时清理了一些css，所以看起来不完全一样，但逻辑应该可以工作。我把幻灯片倒过来了。

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