新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

  接下来就是点击事件的代码

先给大家来得效果图:

图片 1

先看页面代码,列表的嵌套:

<div id="menuDiv">
  <ul id="menu">
    <li class="parentLi">
      B
      <ul class="childrenUl">
        <li class="childrenLi">C</li>
        <li class="childrenLi">C</li>
        <li class="childrenLi">C</li>
      </ul>
    </li>
    <li class="parentLi">
      B
      <ul class="childrenUl">
        <li class="childrenLi">C</li>
        <li class="childrenLi">C</li>
        <li class="childrenLi">C</li>
      </ul>
    </li>
    <li class="parentLi">
      B
      <ul class="childrenUl">
        <li class="childrenLi">C</li>
        <li class="childrenLi">C</li>
        <li class="childrenLi">C</li>
      </ul>
    </li>
  </ul>
</div>

 css 代码,重要安装背景象和子菜单右边框的样式,设置悬浮和当选的体制,伊始设置子菜单不出示(通过 js 设置点击之后再呈现):

#menuDiv{
  width: 200px;
  background-color: #029FD4;
}
.parentLi
{
  width: 100%;
  line-height: 40px;
  margin-top: 1px;
  background: #1C73BA;
  color: #fff;
  cursor: pointer;
  font-weight:bolder;
}
.parentLi span
{
  padding: 10px;
}
.parentLi:hover, .selectedParentMenu
{
  background: #0033CC;
}
.childrenUl
{
  background-color: #ffffff;
  display: none;
}
.childrenLi
{
  width: 100%;
  line-height: 30px;
  font-size: .9em;
  margin-top: 1px;
  background: #63B8FF;
  color: #000000;
  padding-left: 15px;
  cursor: pointer;
}
.childrenLi:hover, .selectedChildrenMenu
{
  border-left: 5px #0033CC solid;
  background: #0099CC;
  padding-left: 15px;
}

  接下去正是点击事件的代码:

$(".parentLi").click(function(event) {
    $(this).children('.childrenUl').slideToggle();
  });
  $(".childrenLi").click(function(event) {
    event.stopPropagation();
    $(".childrenLi").removeClass('selectedChildrenMenu');
    $(".parentLi").removeClass('selectedParentMenu');
    $(this).parents(".parentLi").addClass('selectedParentMenu');
    $(this).addClass('selectedChildrenMenu');
  });

亟待注意的是列表嵌套,会招致事件冒泡,所以在子菜单的点击事件之中要协会冒泡,event.stopPropagation();

上述代码异常的粗略,代码正是注释,jquery手风琴菜单就贯彻了。须要的朋友快来参照他事他说加以考察下吧。

您恐怕感兴趣的篇章:

  • jquery插件制作 手风琴Panel效果完成
  • jQuery制作效果超棒的手风琴折叠菜单
  • 依据jquery的slideDown和slideUp做手风琴
  • jquery手风琴特效插件
  • jquery超轻易完结手风琴效果的点子
  • Jquery组件easyUi达成手风琴(折叠面板)示例
  • 依赖jquery的手风琴图片体现效果落到实处形式
  • 据书上说JQuery的一句话解决手风琴菜单
  • 留意选用的12款不错的依赖jQuery的手风琴效果插件和科目
  • 令人影像深入的十三个jQuery手风琴效果应用
  • jQuery完毕的简便手风琴效果示例

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:  接下来就是点击事件的代码

您可能还会对下面的文章感兴趣: