Question

我遇到问题，我的下拉列表切换了整个li元素集。我只是想知道如何更改我的jQuery来定位父级的第一个孩子ul ，在这种情况下是我点击的span元素。

有没有一种简单的方法来解决这个问题？我在下面附上了一个JSFiddle，也不完全确定为什么列表有一个巨大的左边距，但这似乎微不足道。

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");
            });
        });

Answer 1

在click处理程序中，您不能只使用类说明符 - 这就是您的操作影响每个匹配元素的原因。

您需要遍历DOM树（即.parent()，.child()等）以查找要修改的相关元素。

例如在此处理程序中：

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

您可能希望在包含所点击的dd > ul的{{1}}后面显示<dt>元素：

<a>

虽然说（根据评论），如果您的HTML标记保持原样，您可以按照以下方式简化它，因为只有一个$(".dropdown dt a").click(function() { $(this).parent().next('dd').children('ul').first().toggle(); });且<ul>始终跟在<dd>之后：

<dt>

jQuery定位所有列表元素而不是仅一个

1 个答案: