如何使菜单无法点击但可以恢复?

时间:2016-10-22 16:41:15

标签: javascript html css

我有一个下拉列表的HTML代码。我在这里使用bootstrap下拉菜单。

<ul class="nav navbar-nav navbar-right">
    <li <?php if($tabs=='home' or $tabs=='') echo ' class="active"';?>><a href="<?php echo site_url('');?>">Home</a></li>   
    <li><a href="javascript:void(0)" onclick="LoadAddUser(); return false;">Add User</a></li>   
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Export </a>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" onclick="LoadContactList(); return false;">Contact List</a></li>
            <li><a href="javascript:void(0)" onclick="LoadExportBox(); return false;">Email List</a></li>
        </ul>
    </li>   
    <li><a href="#">Logout</a></li>
</ul>

现在我需要的是,当我将鼠标悬停在“导出”项目上时,下拉列表应该显示为原样,同时该项目不应该是可点击的。我怎么能这样做?

1 个答案:

答案 0 :(得分:1)

您可以将javascript:void(0)与“导出”链接一起使用,如下面的代码

<ul class="nav navbar-nav navbar-right">
    <li <?php if($tabs=='home' or $tabs=='') echo ' class="active"';?>><a href="<?php echo site_url('');?>">Home</a></li>   
    <li><a href="javascript:void(0)" onclick="LoadAddUser(); return false;">Add User</a></li>   
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Export </a>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" onclick="LoadContactList(); return false;">Contact List</a></li>
            <li><a href="javascript:void(0)" onclick="LoadExportBox(); return false;">Email List</a></li>
        </ul>
    </li>   
    <li><a href="#">Logout</a></li>
</ul>