zoukankan      html  css  js  c++  java
  • jQuery 左侧菜单 展开、闭合 &三元运算

     点击展开,再点闭合

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .header{
                background-color: aquamarine;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
    <div style="height: 400px; 200px;border: 1px solid red">
        <div class="item">
            <div class="header">菜单一</div>
            <div class="content hide">内容一</div>
            <div class="content hide">内容二</div>
        </div>
        <div class="item">
            <div class="header">菜单二</div>
            <div class="content hide">内容一</div>
            <div class="content hide">内容二</div>
        </div>
        <div class="item">
            <div class="header">菜单三</div>
            <div class="content hide">内容一</div>
            <div class="content hide">内容二</div>
        </div>
    </div>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $('.header').click(function () {
            //$(this).siblings('.content').removeClass('hide');  //取兄弟节点去掉class属性hide
            var v = $(this).siblings('.content')
            v.hasClass('hide')? v.removeClass('hide'):v.addClass('hide');//判断样式进行反选 && 三元运算 
            $(this).parent().siblings().find('.content').addClass('hide') //父节点的兄弟节点,下面找content的节点,去掉hide
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    My Houdini First Step
    MaxScript随机赋材质
    Groups of Operators
    Select groups in scene
    投篮球
    U3D PlayMovie
    unicornForest
    MaxScript Spinner/progressBar
    MaxScript Button
    MaxScript 扇子打开
  • 原文地址:https://www.cnblogs.com/a10086/p/9393692.html
Copyright © 2011-2022 走看看