zoukankan      html  css  js  c++  java
  • left menu

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .content-left{
    background-color: grey;
    250px;
    border: 1px solid grey;
    }
    .content-left .items .content ul{
    list-style: none;
    margin:0;
    }
    .hide{
    display: none;
    }
    </style>
    </head>
    <body>
    <div class='content-left'>
    <div class='items'>
    <div class='header'>标题一</div>
    <div class='content'>
    <ul>
    <li>content1</li>
    <li>content1</li>
    <li>content1</li>
    </ul>
    </div>
    </div>
    <div class='items'>
    <div class='header'>标题二</div>
    <div class='content hide'>
    <ul>
    <li>content21</li>
    <li>content22</li>
    <li>content23</li>
    </ul>
    </div>
    </div>
    <div class='items'>
    <div class='header'>标题三</div>
    <div class='content hide'>
    <ul>
    <li>content31</li>
    <li>content32</li>
    <li>content33</li>
    </ul>
    </div>
    </div>
    </div>

    <script src='jquery-2.1.4.min.js'></script>
    <script>
    $('.header').click(function(){
    $(this).siblings().removeClass('hide').parent().siblings().children('.content').addClass('hide');
    //$(this).parent().siblings().children('.content').addClass('hide');
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    [bzoj4893]项链分赃
    [Spoj]Counting Divisors (cube)
    [Noi2016]国王饮水记
    [Noi2016]网格
    [Noi2016]优秀的拆分
    [Noi2016]区间
    [Noi2015]寿司晚宴
    Codeforces Round #411 (Div. 2)
    VK-Cup2017 Wild Card Round 2
    [Noi2015]小园丁和老司机
  • 原文地址:https://www.cnblogs.com/howhy/p/7346173.html
Copyright © 2011-2022 走看看