jQuery仿旅游网站侧边栏菜单特效

这是一款使用jquery来制作的仿旅游网站侧边栏菜单特效。该侧边栏菜单在鼠标滑过菜单项时，会显示出该项目下的所有子项，非常的实用。

使用方法

在页面中引入样式文件style.css和jquery.min.js文件。

<link rel="stylesheet" href="css/style.css">
<script src="jquery.min.js"></script>                    
                

HTML结构

该侧边栏菜单的HTML结构如下：

<div class="product_sort fl">
  <div class="hd">旅游产品导航</div>
  <div class="bd">
    <div class="item">
      <div class="title one"><a href="#"><i></i>出境游</a></div>
      <div class="list">
        <a href="#">泰国</a>
        <a href="#">首尔</a>
        <a href="#">曼谷</a>
        <a href="#">大阪</a>
        <a href="#">普吉岛</a>
      </div>
      <div class="arrow">></div>
      <div class="line"></div>
      <div class="subitem">
        <div class="inner">
          <div class="tit tit1">
            <div class="name">泰国</div>
            <ul>
              <li><a href="#">沙巴</a></li>
              <li><a href="#">新加坡</a></li>
              <li><a href="#">菲律宾</a></li>
              ......
            </ul>
          </div>
          <div class="tit">
            <div class="name">印度尼西亚</div>
            <ul>
              <li><a href="#">沙巴</a></li>
              <li><a href="#">新加坡</a></li>
              ......
            </ul>
          </div>
        </div>
      </div>
    </div>
    </div>
    
  </div>
</div>                  
                

JavaScript

在页面DOM元素加载完毕之后，通过下面的jquery代码来为侧边栏菜单项添加鼠标滑过事件。

$(function(){
  $(".product_sort .bd .item").hover(function(){
    $(this).addClass("layer");
  },function(){
    $(this).removeClass("layer");
  });
})