Question

单击（选定）后如何激活此树菜单。我是否需要添加其他JavaScript代码？

我正在使用最新的bootstrap 4和js.3.3.1

<ul class="nav submenu">
  <li class="nav-item">
    <a class="nav-link collapsed" href="#type" data-toggle="collapse" data-target="#type">Type</a>
    <div class="collapse" id="type" aria-expanded="false">
      <ul class="flex-column nav">
        <li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link collapsed" href="#service" data-toggle="collapse" data-target="#service">Service</a>
    <div class="collapse" id="service" aria-expanded="false">
      <ul class="flex-column nav">
        <li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link collapsed" href="#award" data-toggle="collapse" data-target="#award">Award</a>
    <div class="collapse" id="award" aria-expanded="false">
      <ul class="flex-column nav">
        <li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
      </ul>
    </div>
  </li>

</ul>

Answer 1

我认为是的，您应该添加其他JavaScript代码。

function selectedItem(id) {
  $("ul>li>a").removeClass("active");
  $("#" + id).addClass("active");
}

.active {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav submenu">
  <li class="nav-item">
    <a id="item1" onClick="selectedItem('item1')" class="nav-link collapsed" href="#type" data-toggle="collapse" data-target="#type">Type</a>
    <div class="collapse" id="type" aria-expanded="false">
      <ul class="flex-column nav">
        <li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a id="item2" onClick="selectedItem('item2')" class="nav-link collapsed" href="#service" data-toggle="collapse" data-target="#service">Service</a>
    <div class="collapse" id="service" aria-expanded="false">
      <ul class="flex-column nav">
        <li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a id="item3" onClick="selectedItem('item3')" class="nav-link collapsed" href="#award" data-toggle="collapse" data-target="#award">Award</a>
    <div class="collapse" id="award" aria-expanded="false">
      <ul class="flex-column nav">
        <li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
        <li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
      </ul>
    </div>
  </li>

</ul>

单击时如何激活此树菜单（选中）

1 个答案: