前端（jQuery）（9）-- jQuery菜单

1、垂直菜单布局

2、垂直菜单实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(document).ready(function(){

           $(".main>a").click(function(){

               var ulNode = $(this).next("ul");

               // if(ulNode.css("display")=="none"){

               //     ulNode.css("display", "block");

               // }else{

               //     ulNode.css("display","none");

               // }/*这种方法有些繁琐。*/

               // ulNode.hide();/*隐藏*/

               // ulNode.show();/*显示*/

               //ulNode.toggle(500);/*显示/隐藏 这种是相对上面方便的方法*/

                                /*

                                * 数字、slow、normal、fast

                                * */

               // ulNode.slideDown();

               // ulNode.slideUp();//这两种方法也需要自己进行判断。

               ulNode.slideToggle();//这种方法就不需要自己进行判断了。

           });/*用尖角号防止点击子菜单也会执行上面函数*/

        });

    </script>

    <style>

        ul,li{

            list-style: none;

        }

        ul{

            padding:0px;/*覆盖子菜单的缩进*/

            margin:0px;/*防止ie浏览器的问题。*/

        }

        .main{

            background-image: url("images/title.gif");

            background-repeat: repeat-x;

            width:100px;

        }

        li{

            background-color:#eeeeee;

        }

        a{

            text-decoration: none;

            padding-left:20px;

            display:block;

            width:80px;

            padding-top:3px;

            padding-bottom:3px;

        }

        .main>a{

            color:white;

            background-image: url("images/collapsed.gif");

            background-repeat:no-repeat;

            background-position:3px center;/*距离左面3px，垂直方向居中*/

        }

        .main li a{

            color:black;

            background-image:none;

        }

        .main ul{

            display:none;

        }

    </style>

</head>

<body>

<ul>

    <li class="main">

        <a href="#">菜单1</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单2</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单3</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

</ul>

</body>

</html>

3、水平菜单的实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(document).ready(function () {

            isClick = 1;

            /*为了防止多次点击而设置的变量*/

            $(".main>a").click(function () {

                // 这里有个非常nice的写法：$(".main>a,.hmain>a").click(function(){

                // if (isClick) {

                //     isClick = 0;

                    var ulNode = $(this).next("ul");

                    ulNode.stop(true,false).slideToggle();/*详情查询stop函数的用法啊，取消回调函数，两个参数第一个参数决定是否取消当前正在执行的动画，

                                                            第二个参数决定是否立即完成当前正在执行的动画。

                                                            我们在这里使用的动画效果不足以用到第一个参数，所以这里true和false都是可以的。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　这里实现了如何避免动画重复的功能
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　*/

                    /*插两个标签：hover、stop标签*/

                    changeIcon($(this));

                    // setTimeout(function () {

                    //     isClick = 1;

                    // }, 1000);

                    // /*如何处理多次点击造成的之后一直执行动作的方法。

                    //     这里用的是toggle()函数所以没法分开两个动作的处理

                    //     比如在还没展开完毕的时候再次点击没有实现直接收回动作。*/

                // }

            });

            // $(".hmain").hover(function(){

            //     $(this).children("ul").slideToggle();

            // });//这是一种比较简单的方法，下面还有一种很奇妙的方法，给hover两个函数对象作为参数。

            isHover = 1;

            /*为了防止多次点击而设置的变量*/

            $(".hmain").hover(function () {

                    $(this).children("ul").stop(false,false).slideDown(500);

                    changeIcon($(this).children("a"));

                    /*点击的是main的子元素a标签之后执行的动作。*/

                }

                , function () {

                    $(this).children("ul").stop(false,false).slideUp(500);

                    changeIcon($(this).children("a"));

                }

            );

            /*jQuery官方文档中有介绍，这是有两个参数时的方法。

        一个参数是鼠标放上去的时候有的动作，第二个参数时鼠标离开时将要执行的动作。*/

        });

        function changeIcon(mainNode) {

            if (mainNode) {

                if (mainNode.css("background-image").indexOf("collapse.gif") >= 0) {/*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。*/

                    mainNode.css("background-image", "url('images/expanded.gif')");

                } else {

                    mainNode.css("background-image", "url('images/collapse.gif')");

                }

            }

        }

    </script>

    <style>

        ul, li {

            list-style: none;

        }

        ul {

            padding: 0px; /*覆盖子菜单的缩进*/

            margin: 0px; /*防止ie浏览器的问题。*/

        }

        .main, .hmain {

            background-image: url("images/title.gif");

            background-repeat: repeat-x;

            width: 100px;

        }

        li {

            background-color: #eeeeee;

        }

        a {

            text-decoration: none;

            padding-left: 20px;

            display: block;

            width: 80px;

            padding-top: 3px;

            padding-bottom: 3px;

        }

        .main > a, .hmain > a {

            color: white;

            background-image: url("images/collapsed.gif");

            background-repeat: no-repeat;

            background-position: 3px center; /*距离左面3px，垂直方向居中*/

        }

        .main li a, .hmain li a {

            color: black;

            background-image: none;

        }

        .main ul, .hmain ul {

            display: none;

        }

        .hmain {

            float: left;

            margin-right: 3px;

        }

    </style>

</head>

<body>

<ul>

    <li class="main">

        <a href="#">菜单1</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单2</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单3</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <br/>

    <li class="hmain">

        <a href="#">菜单1</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="hmain">

        <a href="#">菜单2</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="hmain">

        <a href="#">菜单3</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

</ul>

</body>

</html>

前端（jQuery）（9）-- jQuery菜单的更多相关文章

知问前端——概述及jQuery UI
知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...
简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
前端学习之jquery/下
前端学习之jquery 一属性操作 html(): console.log($("div").html()); $(".test").html("& ...
前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
Python学习（二十三）—— 前端基础之jQuery
转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...
前端基础之jQuery入门 01
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
第一百七十七节，jQuery，知问前端--概述及 jQuery UI
jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题一．项目介绍我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...
前端基础之 jQuery
浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...
前端(5)之jQuery
前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...

随机推荐

JS规则多样化的我(变量赋值）我们使用"="号给变量存储内容,你可以把任何东西存储在变量里，如数值、字符串、布尔值等，
多样化的我(变量赋值) 我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢? 我们使用"="号给变量存储内容,看下面的语句: var mynum = 5 ; / ...
C++: inheritance
公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ...
HNOI2018思记
4-13 顺顺利利到了湖南.晚上认真研读cf毒瘤题题解,未果. 发现这里含铁丰富的高温多雨式红土地.以及窗户特别深,总有一圈小阳台的房子,门楣深邃如瞳. 看了一波miaom的ZJOI游记,思考了一下解 ...
LUOGU P1291 [SHOI2002]百事世界杯之旅 (期望dp)
传送门解题思路期望$dp$.因为这个是期望步数,所以要倒着推.那么这道题就变得一脸可做了,设$f[i]$表示还有$i$张牌没有收集的期望,那么考虑再抽一张,有$(n-i)/n$的概率抽到抽过的牌, ...
win10系统，vbox下安装centos6/7，挂载实现目录共享
用下载好的iso文件,新建虚拟机(所有步骤默认下一步即可). 我用的centos版本:CentOS-7-x86_64-Minimal-1908.iso ISO下载地址设置虚拟机(指定好镜像后,先不要 ...
微信小程序拼团商品倒计时（拼团列表、拼团商品详情）
直接上图: 拼团列表.拼团详情-倒计时 //单个倒计时,适用用于单个商品的倒计时 js文件: //倒计时 function cou ...
抓包：MySQL Sniffer
1.依赖文件安装依赖glib2-devel.libpcap-devel.libnet-devel [root@VMUest ~]# yum install cmake [root@VMUest ~] ...
<每日一题>题目27：插入排序(假)
''' 插入排序:假设元素左侧全部有序,找到自己的位置插入 ''' import random import cProfile def insert_sort(nums): for i in rang ...
<每日一题>题目10：求斐波拉契数列
def func(x): m,n = 0,1 i = 0 while i < x: yield m m,n = n,m+n i += 1 fib = [] get_func = func(100 ...
NEO4J的安装配置及使用总结
#工具:使用neo4j desktop版本# 一,下载工具可以到官方网站上下载桌面版或者community版本的,下载地址:https://neo4j.com/, 安装好. 二.配置环境变量本文参 ...

前端（jQuery）（9）-- jQuery菜单

1、垂直菜单布局

2、垂直菜单实现

3、水平菜单的实现

前端（jQuery）（9）-- jQuery菜单的更多相关文章

随机推荐

热门专题