jquery - 滑动切换问题

Question

我在使用 jQuery 时遇到了一个小问题。在 HTML 中，我有四个链接。我使用 addClass() 和 removeClass() 来指示已选择哪个链接，并且工作正常。然而，我有一个特定的链接#gallery，它启动一个slideToggle()，列表下方有一个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/