用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

皇家    -  云代码空间

——

jquery实现简单下拉菜单效果

2022-08-16|62阅||

摘要:本文用简单的几行jquery代码实现简单的下拉菜单效果,供大家参考,具体内容如下看效果html<ul> <li> 主题市场 <ul>

本文用简单的几行jquery代码实现简单的下拉菜单效果,供大家参考,具体内容如下

看效果

html


<ul>
    <li>
      主题市场
      <ul>
        <li>
          运动派
          <ul>
            <li>三级菜单a</li>
            <li>三级菜单b</li>
            <li>三级菜单c</li>
            <li>三级菜单d</li>
          </ul>
        </li>
        <li>
          有车族
          <ul>
            <li>
              三级
              <ul>
                <li>四级</li>
                <li>四级</li>
                <li>四级</li>
              </ul>
            </li>
            <li>三级</li>
            <li>三级</li>
            <li>三级</li>
          </ul>
        </li>
        <li>生活家</li>
      </ul>
    </li>
    <li>
      特色购物
      <ul>
        <li>淘宝二手</li>
        <li>拍卖会</li>
        <li>爱逛街</li>
        <li>全球购</li>
        <li>淘女郎</li>
      </ul>
    </li>
    <li>
      优惠促销
      <ul>
        <li>天天特价</li>
        <li>免费试用</li>
        <li>清仓</li>
        <li>1元起拍</li>
      </ul>
    </li>
    <li>工具</li>
</ul>

简单设置一下css
<style type="text/css">
  ul li {
    list-style: none;
  }
 
  li ul {
    display: none;
  }
 
  .plus {
    list-style-image: url(img/plus.gif);
  }
 
  .minus {
    list-style-image: url(img/minus.gif);
  }
</style>

js代码

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
      //给有ul的li加下图标(添加类名)
      $("li:has(ul)")
        .addclass("plus")
        //添加点击事件
        .click(function (e) {
          //看看直接点的那个li(事件源)有没有子元素
          if ($(e.target).children().length) {
            $(this).children().slidetoggle();
            $(this).toggleclass("minus");
          }
          e.stoppropagation(); //阻止事件冒泡,目的只让当前这一层产生动画
        });
    });
</script>

简单的下拉菜单就实现了。
顶 2踩 1收藏
文章评论
    发表评论

    个人资料

    • 昵称: 皇家
    • 等级: 中级程序员
    • 积分: 245
    • 代码: 0 个
    • 文章: 5 篇
    • 随想: 0 条
    • 访问: 1 次
    • 关注

    人气代码

      最新提问

        站长推荐