JQuery链式操作简单的菜单列表

Posted EV.CHANG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery链式操作简单的菜单列表相关的知识,希望对你有一定的参考价值。

    看到这个简单的菜单demo,也是为了再看看JQuery对DOM的操作,一直都记不牢,特别是siblings()这个总是想不起来。

这次再过一遍JQuery,不管简单的还是复杂的demo 还是坚持练习一遍吧!只为记录,如果同时能给你提供帮助,这样最好!

 

<style>
        .wrap{
            width: 100%;
        }
        .inner{
            width: 62.5%;
            margin: auto;
            padding: 50px;
            border:1px solid #ccc;
            box-sizing:border-box;
        }
        .menu{
            width: 100%;
        }
        .sub-nav{
            cursor: pointer;
            color: #333;
            font-size: 16px;
            font-weight: bold;
            padding: 5px;
            background: #ccc;
            overflow: hidden;
        }
        a{
            float: left;
            width: 100%;
            background: #333;
            color: #fff;
            padding: 5px;
            display: none;
        }
        .light{
            color: #3c763d;
            background: #999999;
        }
    </style>

上面css没有写的多么严禁,样式就一带而过吧。

<div class="wrap">
        <div class="inner">
            <div class="menu">
                <div class="sub-nav">
                    <span>The first chapter</span>
                    <a href="javascript:;">The first section</a>
                    <a href="javascript:;">The second section</a>
                    <a href="javascript:;">The third section</a>
                    <div style="clear: both;"></div>
                </div>
                <div class="sub-nav">
                    <span>The second chapter</span>
                    <a href="javascript:;">The first section</a>
                    <a href="javascript:;">The second section</a>
                    <a href="javascript:;">The third section</a>
                    <div style="clear: both;"></div>
                </div>
                <div class="sub-nav">
                    <span>The third chapter</span>
                    <a href="javascript:;">The first section</a>
                    <a href="javascript:;">The second section</a>
                    <a href="javascript:;">The third section</a>
                    <div style="clear: both;"></div>
                </div>
            </div>
        </div>
    </div>

同样的也没什么多描述的。就一坨放在这里了。

<script>
        $(function () {
            $(\'.sub-nav\').click(function () {
                $(this).addClass(\'light\').children(\'a\').show().end().siblings().removeClass(\'light\').children(\'a\').hide();
            })
        })
    </script>

不同的代码风格 看起来肯定舒适度不一样,这样一口气的真头大。为了增强记忆一个一个的分析下。

提倡一行写一个操作。

2017-02-08

以上是关于JQuery链式操作简单的菜单列表的主要内容,如果未能解决你的问题,请参考以下文章

12个用得着的 JQuery 代码片段

国家->州->城市的链式下拉菜单

jQuery之美——链式语法

链式下拉菜单中的默认值

用jquery设置下拉不可编辑,但是没起作用,求高手指点,急。。。

jQuery链式操作如何实现以及为啥要用链式操作