А, Jquery упражнения

Эта страница находится в ид i1тега
```
$('#i1')
```
Эта страница найти все h2метки
```
$('h2')
```
Эта страница найти все inputметки
```
$('input')
```
Эта страница найти все стили класса имеет c1метку
```
$('.c1')
```
Эта страница найти все стили класса имеет btn-defaultметку
```
$('.btn-default')
```
На этой странице представлены все стили класса есть c1теги и все h2теги
```
$('.c1,h2')
```
Эта страница найти все стили класса имеет c1метку и идентификатор p3метки
```
$('.c1,#p3')
```
Эта страница найти все стили класса имеет c1тег и все стили класс имеет btnметку
```
$('.c1,.btn')
```
Найти на этой странице formвсех тегов в inputтеге
```
$('form input')
```
Эта страница была найдена завернутой labelв этикетках inputтеге
```
$('label input')
// 等价于
$('label').find('input')
```
Найденный на этой странице сразу labelза этикеточной inputтега
```
$('label').next('input')   
```
Id найти эту страницу в p2всех его сверстников за меткой и liэтикетки
```
$('#p2').nextAll('li')
```
Id находится f1внутри этикетки первого входного тега
```
$('#f1 input').first()
```
Найдите значение идентификатора my-checkboxвнутреннего тега последний вход этикетки
```
$('#my-checkbox input').last()
```
Найдите значение идентификатора my-checkboxвнутреннего тега не выбран входной тег
```
$('#my-checkbox input').not(':checked')
```
Найти все содержащую inputметку labelтег
```
$('label input')
```

Во-вторых, левая сторона в строке меню

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <title>左侧菜单示例</title>
  <style>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }
    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;
    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>


<script>
  $(".title").click(function (){  
    $(".items").addClass("hide");  
    $(this).next().removeClass("hide");
      
    // $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>

работы JQ

А, Jquery упражнения

Во-вторых, левая сторона в строке меню

рекомендация