如何创建动态下拉菜单？

Question

如何创建动态下拉菜单？

3

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

这是 JavaScript 代码

$(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代码，并且它只会打开被点击的下拉列表。

- Muhammad Kamran

1

JavaScript 真的必要吗？你是否也能接受只使用 CSS 的解决方案？ - Kevin

是的，但下拉菜单应该只在点击时打开。 - Muhammad Kamran

好的。你可以使用这个小库来实现。非常基础并且能满足你的需求。代码不多，但提供了几乎相同的结构和仅在单击时打开的功能。 - Kevin

2个回答

0

最好使用类似Twitter Bootstrap或Zurb Foundation这样的前端框架。

- Sheikh Uzair Hussain

兄弟，我希望你能在我提供的代码中为我提供选项。 - Muhammad Kamran

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sheikh Uzair Hussain · Accepted Answer

我为你做了一些东西：

<!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>