Question

我有一个引导导航栏，其中“添加新候选人” 是我的导航选项，以 li 的身份出现。我想在用户使用时从“导航项目具有树视图” 更改其类到“导航项目具有树视图的导航菜单” 选择它，并还将 ul 的类别更改为“添加新候选人”内的“常规信息”，将其更改为“导航链接已激活”

我也尝试过Bootstrap CSS Active Navigation

中提到的解决方案

Navigation Bar image

Expected Outcome

$(document).ready(function(){
  $('.nav nav-pills nav-sidebar flex-column li').click(function(e) {
    var $this = $(this);
    if (!$this.hasClass('nav-item has-treeview')) {
      $this.addClass('nav-item has-treeview menu-open');
    }
    e.preventDefault();
  });
 
  $('.nav nav-pills nav-sidebar flex-column li a').click(function(e) {
    var $this = $(this);
    if (!$this.hasClass('nav-link')) {
      $this.addClass('nav-link active');
    }
    e.preventDefault();
  });

  $('.nav nav-treeview li a').click(function(e) {
    var $this = $(this);
    if (!$this.hasClass('nav-link')) {
      $this.addClass('nav-link active');
    }
    e.preventDefault();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item has-treeview">
<!-- <li class="nav-item has-treeview menu-open"> -->
    <a href="addnewCandidate" class="nav-link">
    <!-- <a href="addnewCandidate" class="nav-link active"> -->
        <i class="nav-icon fas fa-tachometer-alt"></i>
        <p>Add new Candidate <i class="right fas fa-angle-left"></i></p>
    </a>

    <ul class="nav nav-treeview">
        <li class="nav-item">
            <a href="addnewCandidate" class="nav-link">
            <!-- <a href="addnewCandidate" class="nav-link active"> -->
                <i class="far fa-circle nav-icon"></i>
                <p>General Information</p>
            </a>
        </li>
           
        <li class="nav-item" >
            <a href="educationInfo" class="nav-link">
                <i class="far fa-circle nav-icon" id="education" ></i>
                <p>Education</p>
            </a>
        </li>
       
        <li class="nav-item">
            <a href="trainingInfo" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Training</p>
            </a>
        </li>

        <li class="nav-item">
            <a href="workExperienceInfo" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>WorkExperience</p>
            </a>
        </li>


        <li class="nav-item">
            <a href="languageInfo" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Language</p>
            </a>
        </li>
    </ul>
</li>
</ul>

Answer 1

似乎您在js中处理了错误的类选择器。例如

处理类选择器错误 $('.nav nav-pills nav-sidebar flex-column li').click(function(e) {

正确的处理类选择器 $('.nav.nav-pills.nav-sidebar.flex-column li').click(function (e) {

$(document).ready(function () {
  $('.nav.nav-pills.nav-sidebar.flex-column li').click(function (e) {
    if ($(this).hasClass('has-treeview')) {
      $(this).toggleClass('menu-open');
    }
    e.preventDefault();
  });



  $('.nav.nav-treeview li a').click(function (e) {
    if ($(this).hasClass('nav-link')) {
      $('a').removeClass('active')
      $(this).addClass('active');
    }
    e.preventDefault();
  });

});

.nav {
  font-family: arial;
}
.nav .nav-item .nav-link{
  color: #000;
  text-decoration: none;
}

.nav .nav-item .nav-link.active{
  color: green;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

  <li class="nav-item has-treeview">
    <a href="addnewCandidate" class="nav-link">
      <i class="nav-icon fas fa-tachometer-alt"></i>
      <p>
        Add new Candidate
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>

    <ul class="nav nav-treeview">

      <li class="nav-item">
        <a href="addnewCandidate" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>General Information</p>
        </a>
      </li>


      <li class="nav-item">
        <a href="educationInfo" class="nav-link">
          <i class="far fa-circle nav-icon" id="education"></i>
          <p>Education</p>
        </a>
      </li>

      <li class="nav-item">
        <a href="trainingInfo" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>Training</p>
        </a>
      </li>

      <li class="nav-item">
        <a href="workExperienceInfo" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>WorkExperience</p>
        </a>
      </li>


      <li class="nav-item">
        <a href="languageInfo" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>Language</p>
        </a>
      </li>
    </ul>
  </li>
</ul>

如何更改引导导航的类？

1 个答案: