javascript - 如何在 HTML 中制作 anchor 标记下拉列表

Question

<a href="">Email Management </a>
<p>IT services provide all staff with email address. On creation of your email address you have access to various Google apps like Google drive, Google calendar etc. We also provide group mailing account creation</p>

<ul class="list-unstyled" style="display:none"> 
    <li class="views-row views-row-1 views-row-odd views-row-first">
        <a href="#.html">User Account Creation</a> 
    </li>
    <li> 
        <a href="#.html">Group Account Creation / Distribution List</a> 
    </li>
    <li> 
        <a href="#.html">Deactivation of users and Group Accounts</a>
    </li>
</ul>

我想让电子邮件管理成为一个链接，单击该链接时它会显示这些列表。在单击链接然后将其下拉之前，该列表不会出现。让我举一个我想要实现的网站的例子。这是链接http://ist.mit.edu/services

Answer 1

正如@Paulie_D 所说，使用按钮而不是像下面这样的链接。

$(".show-dropdown").on("click", function() {
    $(this).prop("disabled", true);
    $(".list-unstyled").slideDown("slow");
});

.list-unstyled {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show-dropdown">Email Management </button>
<p>IT services provide all staff with email address. On creation of your email address you have access to various Google apps like Google drive, Google calendar etc. We also provide group mailing account creation</p>

<ul class="list-unstyled"> 
    <li class="views-row views-row-1 views-row-odd views-row-first">
        <a href="#.html">User Account Creation</a> 
    </li>
    <li> 
        <a href="#.html">Group Account Creation / Distribution List</a> 
    </li>
    <li> 
        <a href="#.html">Deactivation of users and Group Accounts</a>
    </li>
</ul>

附言单击该按钮后我将其禁用，因为它更有意义。