0

以下のような3つのセレクトボックスがあります。jQuery トグルを使用して、選択リスト項目を表示し、選択リスト項目を非表示にできるようにしたいと考えています。jQuery.closest() または jQuery.next() を使用することは可能ですか?

<dt><a href="#"><span>A - All</span></a></dt>            

        <dd>
        <ul>                          
            <li><a href="#">A<img class="flag"/><span class="value">A</span></a></li>
            <li><a href="#">B<img class="flag"/><span class="value">B</span></a></li>
            <li><a href="#">C<img class="flag"/><span class="value">C</span></a></li>
        </ul>                                                        
        </dd>

    </dl>


    <dt><a href="#"><span>A1 - All</span></a></dt>            

            <dd>
            <ul>                          
                <li><a href="#">A1<img class="flag"/><span class="value">A1</span></a></li>
                <li><a href="#">B1<img class="flag"/><span class="value">B1</span></a></li>
                <li><a href="#">C1<img class="flag"/><span class="value">C1</span></a></li>
            </ul>                                                        
            </dd>

    </dl>

        <dt><a href="#"><span>A2 - All</span></a></dt>            

                <dd>
                <ul>                          
                    <li><a href="#">A2<img class="flag"/><span class="value">A2</span></a></li>
                    <li><a href="#">B2<img class="flag"/><span class="value">B2</span></a></li>
                    <li><a href="#">C2<img class="flag"/><span class="value">C2</span></a></li>
                </ul>                                                        
                </dd>

    </dl>

注: 各アンカー タグとそれに続く ul タグに固有のクラスを追加することで実行できますが、それはより多くのコードになります。少ないコードでシンプルに保ちたい！

4

2 に答える 2

0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu > dd').hide();
            $('#menu dt').click(function () {
                var objNext = $(this).next('dd');
                if (objNext.is(':visible') === true) {
                    objNext.slideUp();
                }
                else {
                    $('#menu > dd').slideUp(); //( when A is clicked A,B,c show . now B is clicked now A1,B1,C1 show and hide A,B,C, ) else ( comment this line alone ).
                    objNext.slideDown();
                }
            });
        });
    </script>
</head>
<body>
    <dl id="menu">
        <dt><a href="#"><span>A - All</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">A<img class="flag" /><span class="value">A</span></a></li>
                <li><a href="#">B<img class="flag" /><span class="value">B</span></a></li>
                <li><a href="#">C<img class="flag" /><span class="value">C</span></a></li>
            </ul>
        </dd>
        <dt><a href="#"><span>A1 - All</span></a> </dt>
        <dd>
            <ul>
                <li><a href="#">A1<img class="flag" /><span class="value">A1</span></a></li>
                <li><a href="#">B1<img class="flag" /><span class="value">B1</span></a></li>
                <li><a href="#">C1<img class="flag" /><span class="value">C1</span></a></li>
            </ul>
        </dd>
        <dt><a href="#"><span>A2 - All</span></a> </dt>
        <dd>
            <ul>
                <li><a href="#">A2<img class="flag" /><span class="value">A2</span></a></li>
                <li><a href="#">B2<img class="flag" /><span class="value">B2</span></a></li>
                <li><a href="#">C2<img class="flag" /><span class="value">C2</span></a></li>
            </ul>
        </dd>
    </dl>
</body>
</html>
于 2012-04-25T10:22:43.557 に答える
0

HTML を整理すると (</dl>リスト自体にたくさんのタグがあり、開始<dl>タグがどこにもないように見えます)、次のようになります。

<dl>
    <dt><a href="#"><span>A - All</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">A<img class="flag"/><span class="value">A</span></a></li>
            <li><a href="#">B<img class="flag"/><span class="value">B</span></a></li>
            <li><a href="#">C<img class="flag"/><span class="value">C</span></a></li>
        </ul>
    </dd>
    <dt><a href="#"><span>A1 - All</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">A1<img class="flag"/><span class="value">A1</span></a></li>
            <li><a href="#">B1<img class="flag"/><span class="value">B1</span></a></li>
            <li><a href="#">C1<img class="flag"/><span class="value">C1</span></a></li>
        </ul>
    </dd>
    <dt><a href="#"><span>A2 - All</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">A2<img class="flag"/><span class="value">A2</span></a></li>
            <li><a href="#">B2<img class="flag"/><span class="value">B2</span></a></li>
            <li><a href="#">C2<img class="flag"/><span class="value">C2</span></a></li>
        </ul>
    </dd>
</dl>​

次のjQueryは、あなたが望むように動作するようです:

$('dd').hide();

$('dt').click(
    function() {
        var that = $(this),
            affect = $(this).nextUntil('dt'),
            v = affect.is(':visible');

        that.closest('dl').find('dd').slideUp(1000);

        if (v == false){
            affect.slideDown(1000);
        }
        else if (v == true) {
            affect.slideUp(1000);
        }
    });​

JS フィドルのデモ。

参考文献:

于 2012-04-25T10:33:01.977 に答える