如何一次打开一个下拉?

时间:2015-05-23 07:26:17

标签: javascript jquery html

这是我的代码,

<dl id="sample" class="dropdown">
    <dt><a href="#"></a></dt>
    <dd>
        <ul>
            <li><a href="#">News</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Advisory</a></li>
            <li><a href="#">People</a></li>
            <li><a href="#">Universities</a></li>
            <li><a href="#">HR Intellegence</a></li>
            <li><a href="#">Companies</a></li>
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Notifications</a></li>
        </ul>
    </dd>
</dl>

这是我的js ..

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

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

我正在使用此代码进行下拉。我想在我的代码中多次使用它,但问题是,当我点击任何一个下拉菜单时,它会打开页面中的所有下拉菜单。请提出一些对我有用的内容。

1 个答案:

答案 0 :(得分:3)

用户#sample而不是.dropdown或者添加一个虚拟类,用于代码中需要使用的内容,例如dropdown1和代码中使用.dropdwon1