2

我对 jQuery 有一个小问题。在 HTML 中，我有四个链接。我正在使用 addClass() 和 removeClass() 来指示选择了哪个链接，并且工作正常。但是，我有一个特定的链接，#gallery，它启动了一个幻灯片切换（），列表下方有一个 div。问题是，如果 div 正在显示，并且用户选择了不同的链接，则 .selected 类会正确更改，但 div #book 不会关闭。关于如何解决这个问题的任何想法？我已经包含了下面的所有代码，但是（我在这里有一个小提琴，这可能要容易得多。

提前致谢！

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');        
});

​</p>

4

1 回答 1

0

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/

于 2012-10-07T03:49:20.123 回答