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变量（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侦听器中：

$(".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/

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

2 个答案: