Как добавить активный класс в пункты меню и подменю с помощью jQuery

Question

Я новичок в JS / jQuery, я пытаюсь добавить активный класс к своим элементам меню при нажатии, а также к элементам подменю.

$(document).ready(function() {
  $("#pag").click(function() {
    $("span > label").removeClass("activ");
    $(this).addClass("activ");
  });
});

.activ {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="pag" class="list-group">
  <a class="list-group-item " href="#">Choose</a><br>
  <span>
    <label class="list-group-item activ " for="tbavtive1">Main1</label>
    <li class="subs" data-toggle="dropdown" aria-expanded="false">Subs 1</li>
    <ul class="dropdown-menu " x-placement="bottom-start">
      <label class="dropdown-item Stu" for="tbavtive2">Lorem 1</label>  
    </ul>
  </span>
  <span>
    <label class="list-group-item Stu" for="tbavtive9">Main2</label>
    <li class="subs" data-toggle="dropdown" aria-expanded="false">
      Sub2
      <i class="zmdi zmdi-plus zmdi-hc-fw"></i>
    </li>
    <ul class="dropdown-menu " x-placement="bottom-start">
      <label class="dropdown-item Stu" for="tbavtive10">Lorem 2</label>
    </ul>
  </span>
</ul>

Но мой код не работает, кто-нибудь может мне помочь с этим?

Answer 1

Все внутри <ul> должно начинаться с тега <li>, исправьте ваш код, приведенный ниже код должен работать просто отлично.

$(document).ready(function () {
            $("#pag li").click(function () {
                $(this).parent().add("li.activ").removeClass("activ");
                $(this).addClass("activ");
            });
        });

.activ {
  color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="pag" class="list-group">
    <a class="list-group-item " href="#"> Choose</a><br>
   <span>
        <label class="list-group-item activ " for="tbavtive1">
           Main1 </label>
        <li class="subs" data-toggle="dropdown" aria-expanded="false">
            Subs 1         
        </li>
        <li>
          <ul class="dropdown-menu " x-placement="bottom-start">
              <label class="dropdown-item Stu" for="tbavtive2">Lorem 1</label>  
          </ul>
        </li>
    </span>
    <span>
        <label class="list-group-item Stu" for="tbavtive9">
            Main2
        </label>
        <li class="subs" data-toggle="dropdown" aria-expanded="false">
            Sub2
            <i class="zmdi zmdi-plus zmdi-hc-fw"></i>
        </li>
        <ul class="dropdown-menu " x-placement="bottom-start">
            <label class="dropdown-item Stu" for="tbavtive10">Lorem 2</label>
        </ul>
    </span>
</ul>

Answer 2

Проблема в том, что вы добавляете класс к $(this), который указывает на ul. изменив код так, чтобы событие щелчка срабатывало только тогда, когда дочерний элемент label из #pag

окончательно $(this).addClass("activ");, потому что $('this') - это фактическое нажатие на ярлык.

Здесь рабочий фрагмент

$(document).ready(function() {
  $("#pag label").click(function() {
    $("#pag label").removeClass("activ");
    $(this).addClass("activ");
  });
});

.activ {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="pag" class="list-group">
  <a class="list-group-item " href="#">Choose</a><br>
  <span>
    <label class="list-group-item activ " for="tbavtive1">Main1</label>
    <li class="subs" data-toggle="dropdown" aria-expanded="false">Subs 1</li>
    <ul class="dropdown-menu " x-placement="bottom-start">
      <label class="dropdown-item Stu" for="tbavtive2">Lorem 1</label>  
    </ul>
  </span>
  <span>
    <label class="list-group-item Stu" for="tbavtive9">Main2</label>
    <li class="subs" data-toggle="dropdown" aria-expanded="false">
      Sub2
      <i class="zmdi zmdi-plus zmdi-hc-fw"></i>
    </li>
    <ul class="dropdown-menu " x-placement="bottom-start">
      <label class="dropdown-item Stu" for="tbavtive10">Lorem 2</label>
    </ul>
  </span>
</ul>

Answer 3

Проблема с вашим кодом в том, что вы добавляете обработчик событий в родительский ul. Так что в $(this).addClass("activ"); это будет указывать на UL, а не на метку.

Вместо этого вам нужно прикрепить событие к метке.

Также несколько указателей:

• Использовать делегат , Вместо .click используйте .on(eventName, handler). Это будет работать и для динамически добавляемых элементов.
• Вместо $("span > label").removeClass("activ");, сделайте $("span > label.activ").removeClass("activ");. DOM манипулирование очень дорого. Так что выбирайте только те элементы, которые имеют activ класс

Ниже приведен пример кода

$(document).ready(function() {
  $("#pag label.list-group-item").on('click', function() {
    $("span > label.activ").removeClass("activ");
    $(this).addClass("activ");
  });
});

.activ {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="pag" class="list-group">
  <a class="list-group-item " href="#"> Choose
    </a><br>
  <span>
        <label class="list-group-item activ " for="tbavtive1">
           Main1 </label>
        <li class="subs" data-toggle="dropdown" aria-expanded="false">
            Subs 1         
        </li>
        <ul class="dropdown-menu " x-placement="bottom-start">
            <label class="dropdown-item Stu" for="tbavtive2">Lorem 1</label>  
        </ul>
    </span>
  <span>
        <label class="list-group-item Stu" for="tbavtive9">
            Main2
        </label>
        <li class="subs" data-toggle="dropdown" aria-expanded="false">
            Sub2
            <i class="zmdi zmdi-plus zmdi-hc-fw"></i>
        </li>
        <ul class="dropdown-menu " x-placement="bottom-start">
            <label class="dropdown-item Stu" for="tbavtive10">Lorem 2</label>
        </ul>
    </span>
</ul>