jQuery, ориентированный на все элементы списка, а не только на один

У меня проблема, когда мой раскрывающийся список переключает весь набор элементов li. Мне просто было интересно, как я могу изменить свой jQuery для таргетинга на первый дочерний ul родительского элемента, в данном случае на элемент span, на который я нажал.

Есть ли простой способ решить эту проблему? Я прикрепил 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");
            });
        });