slideToggle 的问题

Question

我有一个关于 jQuery 的小问题。在 HTML 中，我有四个链接。我正在使用 addClass() 和 removeClass() 来指示选择了哪个链接，这工作正常。但是，我有一个特定的链接，#gallery，它启动了一个幻灯片切换（），列表下方有一个 div。问题是，如果 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/