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所说，使用按钮而不是下面的链接。

＆＃13;

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

＆＃13;

.list-unstyled {
    display: none;
}

＆＃13;

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

＆＃13;

P.S。我点击它后禁用了按钮，因为它更有意义。

Answer 2

我会使用jQuery＆＃39 .slideToggle()方法：https://jsfiddle.net/9rnwt0s2/

如何在HTML中制作锚标记下拉列表

2 个答案: