如何设置Jquery切换默认显示或隐藏使用htmlclass控件？

Question

我使用 Jquery 切换来显示我的树菜单。

但是我想用HTML来控制哪个子菜单是'actived'

如何让“.active”切换显示默认值？

$('.show_more').click(function () {   
  $(this).parent().children('ul.tree').toggle(200);
});

$(function(){  
  $('.show_more').parent().children('ul.tree').toggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  
  <ul class="level3">
    <li><label class="show_more actived">Bootstrap</label>
      <ul class="nav-list tree bullets">
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">CSS </a></li>
      </ul>
    </li>
    <li><label class="show_more">Bootstrap</label>
      <ul class="nav-list tree bullets">
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">CSS </a></li>
      </ul>
    </li>
  </ul>

</body>
</html>

Answer 1

您可以在 css

中这样做

.tree {
  display: none;
}

.actived+.tree {
  display: block;
}

对于 + 定位下一个直接同级元素

$('.show_more').click(function() {
  $(this).toggleClass('actived')
});

.tree {
  display: none;
}

.actived+.tree {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>


<ul class="level3">
  <li><label class="show_more actived">Bootstrap</label>
    <ul class="nav-list tree bullets">
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">CSS </a></li>
    </ul>
  </li>
  <li><label class="show_more">Bootstrap</label>
    <ul class="nav-list tree bullets">
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">CSS </a></li>
    </ul>
  </li>
</ul>

如何设置Jquery切换默认显示或隐藏使用htmlclass控件？

How to set Jquery Toggle default show or hidden use html class control?

javascript

jquery

toggle