SlideToggle问题

Question

我有一个jQuery的小问题。在HTML中，我有四个链接。我使用addClass（）和removeClass（）来指示哪个链接已被选中，并且工作正常。但是，我有一个特定的链接，#gallery，它使用列表下方的div启动slideToggle（）。事情是，如果div显示，并且用户选择了不同的链接，.selected类会正确更改，但div #book不会关闭。任何想法如何解决这个问题？我已经包括下面的所有代码，但（I've got a fiddle going here，这可能是一个容易得多。

提前感谢！

HTML

<ul> 
<li><a class="link" href="#">Click here</a></li> 
<li><a class="link" id="gallery" href="#">Click here</a></li> 
<li><a class="link" href="#">Click here</a></li> 
<li><a class="link" href="#">Click here</a></li> 
</ul> 
<div id="book"></div> 

CSS

.link:link, .link:visited { text-decoration:none; } 

#book { width:100px; height:100px; background:blue; } 

.selected { color:red; } 

JS

var $book = $('#book'); 
var $gallery = $('#gallery'); 

$book.hide(); 
$('a').click(function(){ 
$('a.selected').removeClass('selected'); 
$(this).addClass('selected'); 
}); 

$gallery.toggle(
function(){$book.slideDown('slow');}, 
function(){ 
    $book.slideUp('slow'); 
    $gallery.removeClass('selected');   
}); 

Answer 1

toggle方法已过时，你可以使用slideToggle相反，你可以if语句，如果目标不与画廊的ID滑动#book元素的元素使用。

$('a').click(function(e) { 
    $('a.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
    if (e.target.id != 'gallery') $book.slideUp('slow'); 
}); 

$gallery.click(function() { 
    $book.slideToggle('slow'); 
}); 

http://jsfiddle.net/Z244D/