如何创建动态下拉菜单？

Muhammad Kamran 发表于 Dev

穆罕默德·卡姆兰

这是我的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>

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

这是单击时填充的下拉列表的代码。我想在网页上重复100次，并且我不想复制代码并更改每个条目的类名或ID。我记得有一些'.this'类型的函数可以做到这一点，但是我不知道如何使用它。另外，我有一些包含此列表的动态帖子，因此不能在每个新条目上重复其JS。

请在此代码中提出这样的更改建议，这将使我可以对每个条目使用“ .dropdown”类，而无需重复JS代码，它仅打开单击即可打开的下拉列表。

uz4ir

我为你做了一些：

<!DOCTYPE html>
<html>
<head>
    <style>
    html {
        font-family: sans-serif;
    }
    .dropdown {
        display: inline-block;
    }
    .dropdown dd {
        display: none;
        box-shadow: 0px 0px 2px 0px #555;
        width: 180px;
        position: absolute;
        margin-left: 1px;
        margin-top: 1px;
        background-color: #FFF;
    }
    .dropdown ul {
        list-style: none;
        padding-left: 0px;
    }
    dt a {
        display: inline-block;
        background-color: #1b8be0;
        padding: 10px;
        color: #FFF;
        text-decoration: none;
    }
    .dropdown li a{
        text-decoration: none;
        color: #333;
    }
    .dropdown li {
        padding: 6px;
        cursor: pointer;
    }
    .dropdown li:hover{
        background-color: #EEE;
        padding: 6px;
    }
    </style>
</head>
<body>
<dl id="sample" class="dropdown">
    <dt><a href="#">Menu</a></dt>
    <dd>
        <ul>
            <li><a href="#">News</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Community</a></li>
        </ul>
    </dd>
</dl>
<dl id="sample-2" class="dropdown">
    <dt><a href="#">Menu 2</a></dt>
    <dd>
        <ul>
            <li><a href="#">More News</a></li>
            <li><a href="#">More Jobs</a></li>
            <li><a href="#">More Community</a></li>
        </ul>
    </dd>
</dl>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".dropdown dt a").click(function(e){
    $(this).parent().next().fadeToggle("fast");
});
$(".dropdown dt a").blur(function(e){
    if ($(e.target).not(".dropdown ul")){
        $(".dropdown dd").fadeOut();
    }
});
</script>
</body>
</html>