jquery接下来与ol

时间:2012-06-27 09:10:03

标签: jquery jquery-ui

我想点击链接

切换订单列表
<li id="1" style="display: list-item;">
    <div class='group'>
        <div style='float:left;'>
            <span>&nbsp;</span>
            **<a class='expand' href='#'>Group 1</a>**
        </div>
        <div style='float:right;'>
            <a href='#'>Edit</a>
            <a href='#'>Delete</a>
        </div>
        <div style='clear:both;'></div>
    </div>
    **<ol style='display:none;'>**
        <li id="2" style="display: list-item;">
            <div class='patent'>
                <div style='float:left;'>
                    <span>&nbsp;</span>
                    <a href='#'>Patent 1</a>
                    <em>The description of patent 1</em>
                </div>
                <div style='float:right;'>
                    <a href='#'>Edit</a>
                    <a href='#'>Delete</a>
                </div>
                <div style='clear:both;'></div>
            </div>
        </li>
        <li id="3" style="display: list-item;">
            <div class='patent'>
                <div style='float:left;'>
                    <span>&nbsp;</span>
                    <a href='#'>Patent 2</a>
                    <em>The description of patent 2</em>
                </div>
                <div style='float:right;'>
                    <a href='#'>Edit</a>
                    <a href='#'>Delete</a>
                </div>
                <div style='clear:both;'></div>
            </div>
        </li>
    **</ol>**
</li>

当我抓住粗体链接时,我希望切换ol。可以有很多ols和许多同一类的链接。

我的尝试是

<script>
$(document).ready(function(){
    $('.expand').click(function() {
        $(this).closest('ol').slideToggle('slow');
    });
});
</script>

1 个答案:

答案 0 :(得分:2)

你应该做

$(document).ready(function(){
    $('.expand').click(function() {
        $(this).closest('li').find('ol').slideToggle('slow');
    });
});

附注:如果我没记错的话,数字不是有效的ids