0

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

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

尝试添加你的代码布赖恩但设法完全破坏它，我显然没有把它放在正确的地方:(

编辑

添加布赖恩斯的建议...

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

});

4

2 回答 2

0

您需要跟踪面板的状态，因为您有两个关闭触发器（因此一个简单的切换侦听器是不够的）。您可以添加一个 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');;
});
于 2010-11-01T16:01:56.450 回答
0

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

于 2010-11-01T16:09:47.107 回答