网页中常用的简单横向和纵向菜单

最新推荐文章于 2020-12-21 01:16:29 发布

原创最新推荐文章于 2020-12-21 01:16:29 发布 · 4.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#function #class #xhtml #url #联想 #三星

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用jQuery来实现网页中横向和纵向菜单的显示与隐藏效果。通过单击或鼠标悬停操作来控制子菜单的展开与收起，并通过更改图标样式提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>网页中常用的横向和纵向菜单</title>
    <style type="text/css">
    ul,li
    {
       list-style:none; 
        }
    ul
    {
      padding:0;
      margin:0;   
        }
     .main,.hmain
     {
       background-image:url("images/blk.png");
       background-repeat:repeat-x;
       width:100px;
         }
      li
      {
       background-color:#CCCCCC;    
          }
      a
      {
          text-decoration:none;
          padding-left:20px; 
          }
       .main a,.hmain a
       {
          color:White; 
          background-image:url("images/right.png"); 
          background-repeat:no-repeat;
          background-position: 2px center;
           }   
      .main li a, .hmain li a
      {
          color:Black;
          background-image:none;
          } 
      .main ul,.hmain ul
      {
         display:none;
          }
       .hmain
       {
          float:left;
           }              
    </style>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('.main > a').click(function () {
                $(this).next('ul').slideToggle(500);//设置单击时显示和隐藏
                changeIcon($(this));//设置图标样式
            });
            $('.hmain').hover(function () {
                $(this).children('ul').slideDown();//鼠标划入显示子菜单
                changeIcon($(this).children('a')); //设置图标样式
            }, function () {
                $(this).children('ul').slideUp();//鼠标划出隐藏子菜单
                changeIcon($(this).children('a')); //设置图标样式
            });
        });
        //设置图标样式方法
        function changeIcon(dom) {
            if (dom) {
                if (dom.css("background-image").indexOf("images/right.png") >= 0) {
                    dom.css("background-image", "url('images/down.png')");
                }
                else {
                    dom.css("background-image", "url('images/right.png')");
                }
            }
        }
    </script>
</head>
<body>
<h2>使用jquery实现横向和纵向菜单</h2>
<h3>当单击横向菜单的父菜单时,显示子菜单；再次单击则隐藏，并且设置图标样式.</h3>
<h3>当鼠标划入纵向父菜单时,显示子菜单；划出则隐藏子菜单，并且改变图标样式.</h3>
<ul>
<li class="main"><a href="#">手机</a>
<ul>
<li><a href="#">三星</a></li>
<li><a href="#">苹果</a></li>
</ul>
</li>
<li class="main"><a href="#">电脑</a>
<ul>
<li><a href="#">联想</a></li>
<li><a href="#">惠普</a></li>
</ul>
</li>
<li class="main"><a href="#">冰箱</a>
<ul>
<li><a href="#">海尔</a></li>
<li><a href="#">美菱</a></li>
</ul>
</li>
</ul>
<br />
<br />
<ul>
<li class="hmain"><a href="#">手机</a>
<ul>
<li><a href="#">三星</a></li>
<li><a href="#">苹果</a></li>
</ul>
</li>
<li class="hmain"><a href="#">电脑</a>
<ul>
<li><a href="#">联想</a></li>
<li><a href="#">惠普</a></li>
</ul>
</li>
<li class="hmain"><a href="#">冰箱</a>
<ul>
<li><a href="#">海尔</a></li>
<li><a href="#">美菱</a></li>
</ul>
</li>
</ul>
</body>
</html>