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. 

嘗試添加代碼布賴恩但設法完全打破它，我顯然還沒有把它放到正確的地方:(

編輯非常感謝

添加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/