下拉菜单;手风琴;九宫格的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>
相关文章
|
9月前
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
49 0
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
47 0
|
1月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
40 0
|
1月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
61 0
|
9月前
|
JavaScript
jQuery 下拉菜单 添加动画
jQuery 下拉菜单 添加动画
59 0
|
JavaScript 前端开发
jQuery练习——下拉菜单
当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。
146 0
|
JavaScript
jquery:简洁版滑动下拉菜单-21
jquery:简洁版滑动下拉菜单-21
85 0
jquery:简洁版滑动下拉菜单-21
|
JavaScript
jquery简洁版滑动下拉菜单问题解决-22
jquery简洁版滑动下拉菜单问题解决-22
85 0
jquery简洁版滑动下拉菜单问题解决-22
|
JavaScript
jQuery 实例
jQuery 实例
103 0