如何使HTML下降錨標籤下的列表

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

我會使用jQuery的.slideToggle()方法：https://jsfiddle.net/9rnwt0s2/

Answer 2

正如@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>

附：一旦點擊按鈕，我已禁用該按鈕，因爲它更有意義。