2

リンクをクリックして注文リストを切り替えたい

<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 が切り替えられます。同じクラスを持つ多数の OL と多数のリンクが存在する可能性があります。

私の試みは

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

1 に答える 1

2

やったほうがいい

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

補足: 私の記憶が正しければ、数字は有効な ID ではありません

于 2012-06-27T09:11:39.597 に答える