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语句，如果target不是图库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/

使用slideToggle时出现问题

1 个答案: