下拉菜单;手风琴;九宫格的Jquery的使用实例-阿里云开发者社区

开发者社区> 浅色夏墨> 正文

下拉菜单;手风琴;九宫格的Jquery的使用实例

简介: 下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 下拉.gif 代码如下: 下拉菜单 li{ width: 80px; ...
+关注继续查看

下拉菜单;手风琴;九宫格的Jquery的使用实例

1.下拉菜单

效果如图:
img_7fc3d7f446aaa8c213e8e4140a275684.gif
下拉.gif
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
        <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
    <style>
        li{
            width: 80px;
            background-color: deepskyblue;
            list-style: none;
            cursor:pointer;
        }
        ul > li.out {
            display: block;
            list-style: none;
            float: left;
            padding-left: 40px;
        }

        ul > li ul{
            position: relative;
            padding-left: 0px;
        }
        .beijing{
            width: 800px;
            height: 30px;
            background-color: skyblue;
            position: absolute;
            margin-top: -6px;
            z-index: -5;
        }


    </style>
</head>
<body>
<div class="beijing"></div>

<ul class="outUl">
    <li class="out">政策指南
        <ul>
            <li>政策指南1</li>
            <li>政策指南2</li>
            <li>政策指南3</li>
        </ul>
    </li>
    <li class="out">教务园地
        <ul>
            <li>教务园地1</li>
            <li>教务园地2</li>
            <li>教务园地3</li>
        </ul>
    </li>
    <li class="out">走进课堂
        <ul>
            <li>走进课堂1</li>
            <li>走进课堂2</li>
            <li>走进课堂3</li>
        </ul>
    </li>
</ul>

<script>

$(function () {
   var  $li = $("ul > li ul");
    $li.hide();
    $(".outUl>li.out").mouseenter(function () {
        $(this).children().show(500);
    });


    $(".outUl>li.out").mouseleave(function () {
        $li.hide(200);
    });
})


</script>

</body>
</html>

2.手风琴

效果如图:
img_a26d0fbb658258103f98677c6ca46c51.gif
手风琴.gif
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>
        .container{

            width: 200px;
            height: 500px;
            border: 1px solid black;


        }
        .out{
            background-color: #00CCFF;
            cursor: pointer;
            /*cursor: help;*/
        }
        .inner{
            height: 120px;
        }

    </style>

</head>
<body>
<div class="container">

    <div>
        <div class="out">
            下拉列表1
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
    <div>
        <div class="out">
            下拉列表2
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
    <div>
        <div class="out">
            下拉列表3
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
    <div>
        <div class="out">
            下拉列表4
        </div>
        <div class="inner">
            下拉列表的内容
        </div>
    </div>
</div>

<script>
    $(function () {
        $(".container div.inner").hide();
        $(".container div.out").click(function () {
            console.log($(this).next(".inner").siblings().next(".inner"));
            $(this).next(".inner").toggle(200).parent().siblings().children(".inner").slideUp(200);
        });
    })
</script>

</body>
</html>

3.九宫格

效果如图:
img_3429e5f21bd39523721b34916017e822.gif
jiu.gif
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
    <style>

        * {
            background-color: black;
        }

        .container {
            width: 500px;
            border: 1px solid white;
            margin: auto;
            overflow: hidden;

        }

        .container div {

            width: 135px;
            height: 165px;
            display: block;
            margin: 10px 10px;
            float: left;


        }

        .red{
            background-color: red;
        }
        .green{
            background-color: green;

        }

        .blue{
            background-color: blue;

        }


    </style>

</head>
<body>
<div class="container">


    <div  class="red"></div>
    <div  class="blue"></div>
    <div  class="green"></div>

    <div  class="red"></div>
    <div  class="blue"></div>
    <div  class="green"></div>

    <div  class="red"></div>
    <div  class="blue"></div>
    <div class="green"></div>

</div>

<script>
$(function () {

    $(".container>div").mouseenter(function () {
        $(this).css("opacity",1).siblings().css("opacity",0.4);
    });

    $(".container").mouseleave(function () {
        $(".container div").css("opacity",1);
    })
})
</script>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。
854 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10071 0
使用W“.NET技术”CF实现SOA面向服务编程——简单的WCF开发实例
  前面为大家介绍过WCF的特点,现在再讲解一下WCF基础概念。   在WCF里,各个Application之间的通信是由EndPoint来实现的,EndPoint是WCF实现通信的核心要素。一个WCF Service可由多个EndPoint集合组成,每个EndPoint只能有一种绑定,就是说EndPoint就是通信的入口,客户端和服务端通过 EndPoint交换信息。
690 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13880 0
下拉菜单;手风琴;九宫格的Jquery的使用实例
下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 下拉.gif 代码如下: 下拉菜单 li{ width: 80px; ...
940 0
Jquery联动下拉菜单
用Jquery 1.4.4 实现的联动下拉菜单,估计在Jquery 1.2版本以上都可用。 联动下拉菜单是一主一从两个select,切换主select时,从select的内容跟着改变。这里是把从select的项目按组optgroup全部加载进来,然后切换主select时更新从select组的显示或者隐藏。
686 0
Java面试 - 什么是单例设计模式,为什么要使用单例设计模式,如何实现单例设计模式(饿汉式和懒汉式)?
单例设计模式是Java常用的设计模式, 也是Java 面试经常遇到的问题,让我们一起了解一下单例设计模式吧!
481 0
+关注
76
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载