开发者

List doesn't want to toggle

I have a (semantically incorrect) HTML like this:

<ul>
<li class="year">2009</li>
<li><a href="project1.html">Project 1</a></li>
<li><a href="project2.html">Project 2</a></li>
<li><a href="project3.html">Project 3</a></li>
</ul>

<ul>
<li class="year">2008</li>
<li><a href="project4.html">Project 4</a></li>
<li><a href="project5.html">Project 5</a></li>
<li><a href="project6.html">Project 6</a></li>
</ul>

<ul>
<li class="year">2007</li>
<li><a href="project7.html">Project 7</a></li>
<li><a href="project8.html">Project 8</a></li>
<li><a href="project9.html">Project 9</a></li>
</ul>

and a jQuery script like this:

$(function() {
    $('.year').click(function() {
        $('ul').find('li:not(.year)').slideUp('fast');
        $(this).closest('ul').find('li:not(.year)').toggle('fast');
    })
})

It works almost as needed. By default all ul li-s are hidden except those having the class year. When the user clicks on a year, any opened year's links slide up and the clicked year's links slide down. The problem is that if I click on a year when it's opened it first slides up (being intercepted by the first line) and then slides down via the toggle line. I'd like it to stay closed with the slide up line not intercepting the currently clicked y开发者_JAVA技巧ear.

Hope this makes sense.

Any help appreciated.


May be you should use the :hidden or :visible selector to distinguish which are already shown.

$(function() {
    $('.year').click(function() {
        $('ul').find('li:not(.year)').slideUp('fast');
        $(this).closest('ul').find('li:not(.year):hidden').toggle('fast');
    })
})


In therms of the :not is it not true that you can only use filter as opposed to find expressions in here e.g. :not(:blah) or :not([blah] but not :not(.blah)?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜