如何显示和隐藏下拉菜单

How to show and hide Dropdown Menu?

本文关键字：隐藏 下拉菜单 显示 何显示      更新时间：2023-09-26

我对使用jQuery和CSS的下拉菜单有疑问，下面是我的HTML结构:

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <img src="images/Icons.png" alt="a"/>
            <div class="menu" id="a">
                <ul>
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                </ul>
            </div>
        </td>
        <td>
            <img src="images/Icons.png" alt="b"/>
            <div class="menu" id="b">
                <ul>
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                </ul>
            </div>
        </td>
        <td>
            <img src="images/Icons.png" alt="c"/>
            <div class="menu" id="c">
                <ul>
                    <li><a href="#">link 5</a></li>
                    <li><a href="#">link 6</a></li>
                </ul>
            </div>
        </td>
    </tr>
</table>

我想实现当鼠标移到图像上时，div将显示并显示菜单，菜单链接是可点击的，而当鼠标离开图像时，div将被隐藏或用户鼠标离开菜单。

我真的建议你使用无序列表而不是表格，你的html看起来像这样:

<nav id="main-nav">
    <ul>
        <li>
            <a href="#">
                <img src="whatever.jpg" alt="" />
            </a>
            <ul class="dropdown">
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
            </ul>
        </li>
    </ul>
</nav>

和你的风格:

#main-nav > ul {}
#main-nav > ul > li {}
#main-nav > ul > li > a {}
#main-nav > ul > li:hover > ul { display:block; }
#main-nav > ul > li > ul { display:none; }
#main-nav > ul > li > ul > li {}
#main-nav > ul > li > ul > li > a {}

你可以使用这个html/css使你想要的工作

我将通过添加如下两个CSS类来实现这一点:

.hidden
{
display: none;
width: 0px;
height: 0px;
}
.show
{
/*add any styling desired when showing*/
}

鼠标悬停效果:

window.onload = function(){
     document.getElementById('imageId').onmouseover = function() {
          document.getElementById('menuId').classname = 'show';
     }
     document.getElementById('imageId').onmouseout = function() {
          document.getElementById('menuId').classname = 'hidden';
     }
}

然后把菜单的默认css类设置为hidden类，就可以了

相关文章：