При щелчке по подкатегории должны отображаться только подпункты этой категории.

Question

Когда я нажимаю на основную категорию, она показывает мне подкатегории. После нажатия на подкатегорию он открывает все подэлементы внутри подкатегории. Для всех заданных подкатегорий в этой конкретной основной категории, если я просто нажму на 1 подкатегорию, она должна показать только подэлементы 1 категории.

$(document).ready(function() {
  $("a.main-category").click(function() {
    $(this).next("div.sub-category").toggle();
  });

  $("a.show-item").click(function() {
    $("ul.show-subitem").toggle();
  });
});

.hide-subitem {
  display: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.margin-15px {
  margin-left: 25px;
}

a.full-width {
  display: block;
  width: 100%;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li style="border: 1px solid black;">
    <a class="main-category full-width">SSC</a>
    <div class="sub-category hide-subitem">
      <ul class="exam-type">
        <li><a class="show-item full-width">SSC CGL</a></li>
        <ul class="show-subitem margin-15px">
          <li>2019</li>
          <li>2018</li>
          <li>2017</li>
          <li>2016</li>
          <li>2015</li>
        </ul>
        <ul class="exam-type">
          <li><a class="show-item full-width">SSC CGL</a></li>
          <ul class="show-subitem margin-15px">
            <li>2019</li>
            <li>2018</li>
            <li>2017</li>
            <li>2016</li>
            <li>2015</li>
          </ul>
        </ul>
    </div>
  </li>
  </ul>

Answer 1

Вы можете сделать это разными способами. Однако самым простым будет тот, который вы уже реализовали, поместив триггер и target на одном уровне дерева и просто переключив элемент рядом с триггером, используя next()

Редактировать: Как и сейчас, вы предоставили свой собственный HTML-код, который имеет некоторые отличия от того, который я предполагал ранее. Поэтому вам нужно позвонить parentsUntil() перед тем, как позвонить next(), чтобы выполнить работу.

$(document).ready(function() {

  $("a.main-category").click(function() {
    $(this).next("div.sub-category").toggle();
  });

  $("a.show-item").click(function() {
    $(this).parentsUntil("ul").next("ul.show-subitem").toggle();
  });

});

Кроме того, вам также необходимо добавить это к вашему CSS :

.show-subitem {
  display: none;
}