0

我有一个问题，我的下拉列表正在切换整个li元素集。我只是想知道如何更改我的 jQuery 以定位父级的第一个子 ul，在本例中是span我单击的元素。

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

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

您可能希望显示包含 clicked的dd > ul元素：<dt><a>

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

尽管如此（根据评论），如果您的 HTML 标记保持原样，您可以将其简化如下，因为只有一个<ul>并且<dd>始终遵循<dt>：

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