0

liドロップダウン リストが要素のセット全体を切り替えているという問題があります。親の最初の子ul、この場合はspanクリックした要素をターゲットにするようにjQueryを変更する方法を考えていました。

この問題を解決する簡単な方法はありますか? 以下に JSFiddle を添付しました。また、リストに大きな左マージンがある理由も完全にはわかりませんが、それは些細なことのようです。

http://jsfiddle.net/4yJuc/24/

HTML

<dl id="sample" class="dropdown">
    <dt><a href="#"><span>COUNTRIES</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
            <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
            <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
            <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>

        </ul>
    </dd>

        <dt><a href="#"><span>PLANETS</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">EARTH<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
            <li><a href="#">SATURN<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
            <li><a href="#">MARS<img class="flag" src="de.png" alt="" /><span class="value">MR</span></a></li>
            <li><a href="#">PLUTO(JK)<img class="flag" src="in.png" alt="" /><span class="value">PL</span></a></li>

        </ul>
    </dd>


</dl>
<span id="result"></span>​

jQuery

  $(document).ready(function() {
            $(".dropdown img.flag").addClass("flagvisibility");

            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });

            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });

            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });


            $("#flagSwitcher").click(function() {
                $(".dropdown img.flag").toggleClass("flagvisibility");
            });
        });
4

1 に答える 1

3

ハンドラーでは、clickクラス指定子だけを使用することはできません。そのため、アクションは一致するすべての要素に影響を与えます。

変更する関連要素を見つけるには、DOMツリー（つまり.parent()、など）をトラバースする必要があります。.child()

たとえば、このハンドラーでは次のようになります。

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});

おそらく、クリックされたものを含むdd > ul次の要素を表示したいでしょう：<dt><a>

$(".dropdown dt a").click(function() {
    $(this).parent().next('dd').children('ul').first().toggle();
});

それは（コメントごとに）言っていますが、HTMLマークアップがそのままの場合は、次のように簡略化できます。これは、1つしかなく<ul>、<dd>常に次のようになるため<dt>です。

$(".dropdown dt a").click(function() {
    $(this).parent().next().children().toggle();
});
于 2012-10-07T12:25:41.650 に答える