jquery实现简单下拉菜单效果

本文用简单的几行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>

简单的下拉菜单就实现了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 来自国外的30个基于jquery的Web下拉菜单

    jQuerySmooth Navigation Menu Simple Drop Down Menu Plugin Dropdown, iPod Drilldown, and Flyout styles jQuery and CSS Example Create the Fanciest Drop Down Menu You Ever Saw A Different Top Navigation Simple jQuery Dropdowns Sexy Drop Down Menu with j

  • Jquery带搜索框的下拉菜单

    1.样式引用: 复制代码 代码如下: <link rel="stylesheet" href="~/Js/Ddl_Chosen/chosen.css" /> 2.由于应用了Jquery,所以引用Jquery.(下载地址) 复制代码 代码如下: <script src="<%= ResolveUrl("~/Js/Jquery.js")%>" type="text/javascript&qu

  • JQuery设置获取下拉菜单某个选项的值(比较全)

    JQuery获取和设置Select选项 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置sele

  • jquery实现鼠标滑过显示二级下拉菜单效果

    本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

  • 用jquery实现下拉菜单效果的代码

    效果如下:这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a>

  • jQuery点击弹出下拉菜单的小例子

    复制代码 代码如下: <title>导航--点击弹出内容</title>    <style type="text/css">.navgation{margin:0;padding:0;list-style-type:none;position:relative;}.navgation li {float:left;}.navgation a{padding:3px 6px;background-color:orange;color:white;te

  • 用jquery实现的一个超级简单的下拉菜单

    用jquery实现的一个超级简单的下拉菜单. 效果图 初始效果  鼠标悬浮效果  代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.11.1.js"></script> <style> nav a { text-decoration: none; } nav >

  • jQuery ul标签下拉菜单演示代码

    这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a> <u

  • jQuery实现的导航下拉菜单效果示例

    本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!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"> <h

随机推荐