1

Есть вертикальное меню многоуровневое меню. Нужно сделать так, чтобы при нажатии на элемент списка, его содержимое разворачивалось. Собственно, проблема в том, что мой скрипт сворачивает/разворачивает все элементы списка сразу) Подскажите пожалуйста, что в нем изменить.

Upd: вариант с использованием метода .next в моем случае не подходит, так как действия должны происходить при нажатии на .arrow, а спан с этим классом не соседний по отношению к .children. Изменить их порядок возможности не имею.

$(document).ready(function () {
  $('.arrow').click(function (e) {
    $('.children').slideToggle();
  });
});
* {
  margin: 0;
}
.product-categories {
  font-family: 'Open Sans';
  margin: 10px auto;
  width: 270px;
  padding: 0;
  border: 1px solid #d1d2d5;
  border-radius: 0 0 4px 4px;
}
.product-categories .cat-item {
    list-style: none;
    font-size: 14px;
    line-height: normal;
}
.product-categories .cat-item a {
    display: block;
    padding: 5px 55px 5px 8px!important;
    color: #424242;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    -ms-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}
ul.product-categories i {
  display: none;
}
.product-categories > .cat-item:hover {
    background-image: -moz-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
    background-image: -webkit-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
    background-image: -o-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
    background-image: -ms-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
    background-image: linear-gradient(bottom, #f99637 0%, #fcb040 100%);
}
.product-categories .cat-item:hover a {
    text-shadow: 1px 1px 2px rgba(255,255,255,.6);
}
.product-categories .cat-item:hover a {
    text-shadow: 1px 1px 2px rgba(255,255,255,.6);
}
.product-categories > .cat-item:hover > a {
    color: #d20000 !important;
}
.product-categories > .cat-parent {
    padding-right: 15px;
}

.count {
  position: relative;
  display: none;
  top: 0px;
  right: 0px;
}

.product-categories > li .children > li a {
  width: 80%;
  padding: 5px;
  display: inline-block;
}

.product-categories > li {
   position: relative;
}
.product-categories > li .arrow {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 29px;
  height: 29px;
  border-left: 1px solid #dbdbdb;
  text-align: center;
  line-height: 29px;
  font-size: 16px;
  z-index: 2;
  color: #000;
  cursor: pointer;
}
.product-categories > li .arrow i {
  display: inline;
  margin: 0;
}
.children {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/ea0959dcb8.js"></script>

<ul class="product-categories highlighted">
  <li class="cat-item cat-item-49 cat-parent">
    <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
    <a href="http://inter-present.kz/catalog/biznes-suveniry/"><i class="fa fa-star"></i>
      <span class="heading">
        <span class="menu-title">Бизнес сувениры</span>
      </span>
    </a>
    <span class="count">(124)</span>

    <ul class="children">
      <li class="cat-item cat-item-52">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/bloknoty/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Блокноты</span>
          </span>
        </a>
        <span class="count">(8)</span>
      </li>
      <li class="cat-item cat-item-167">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/nabor-na-stol/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Набор на стол</span>
          </span>
        </a>
        <span class="count">(2)</span>
      </li>
      <li class="cat-item cat-item-55">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podarochnye-nabory/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подарочные наборы</span>
          </span>
        </a>
        <span class="count">(38)</span>
      </li>
      <li class="cat-item cat-item-53">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podstavki-pod-ruchki/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подставки под ручки</span>
          </span>
        </a>
        <span class="count">(12)</span>
      </li>
      <li class="cat-item cat-item-56">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/relaksanty-antistressy/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Релаксанты, антистрессы</span>
          </span>
        </a>
        <span class="count">(14)</span>
      </li>
    </ul>
  </li>
  <li class="cat-item cat-item-49 cat-parent">
    <a href="http://inter-present.kz/catalog/biznes-suveniry/"><i class="fa fa-star"></i>
      <span class="heading">
        <span class="menu-title">Бизнес сувениры</span>
      </span>
    </a>
    <span class="count">(124)</span>
    <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>

    <ul class="children">
      <li class="cat-item cat-item-52">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/bloknoty/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Блокноты</span>
          </span>
        </a>
        <span class="count">(8)</span>
      </li>
      <li class="cat-item cat-item-167">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/nabor-na-stol/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Набор на стол</span>
          </span>
        </a>
        <span class="count">(2)</span>
      </li>
      <li class="cat-item cat-item-55">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podarochnye-nabory/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подарочные наборы</span>
          </span>
        </a>
        <span class="count">(38)</span>
      </li>
      <li class="cat-item cat-item-53">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podstavki-pod-ruchki/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подставки под ручки</span>
          </span>
        </a>
        <span class="count">(12)</span>
      </li>
      <li class="cat-item cat-item-56">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/relaksanty-antistressy/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Релаксанты, антистрессы</span>
          </span>
        </a>
        <span class="count">(14)</span>
      </li>
    </ul>
  </li>
</ul>

2
  • Возможный дубликат вопроса: Открытие одного подменю, а не всех сразу
    – stackanon
    13 авг 2016 в 8:21
  • .next здесь не подойдет - необходимо чтобы действия происходили при нажатии на .arrow, а спан с этим классом не является соседним по отношению к .children. Изменить их порядок возможности не имею. Здесь немноого непраильный код вставил, сейчас поправлю.
    – Игорь
    13 авг 2016 в 8:24

1 ответ 1

1

$(document).ready(function() {
  var subCat = $('.product-categories .children');
  $('.arrow').click(function(e) {
    var current = $(this).closest('li').find('ul');
    subCat.not(current).slideUp();
    current.slideToggle();
  });
});
* {
  margin: 0;
}
.product-categories {
  font-family: 'Open Sans';
  margin: 10px auto;
  width: 270px;
  padding: 0;
  border: 1px solid #d1d2d5;
  border-radius: 0 0 4px 4px;
}
.product-categories .cat-item {
  list-style: none;
  font-size: 14px;
  line-height: normal;
}
.product-categories .cat-item a {
  display: block;
  padding: 5px 55px 5px 8px!important;
  color: #424242;
  -webkit-transition: all .1s;
  -moz-transition: all .1s;
  -ms-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s;
}
ul.product-categories i {
  display: none;
}
.product-categories > .cat-item:hover {
  background-image: -moz-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
  background-image: -webkit-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
  background-image: -o-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
  background-image: -ms-linear-gradient(bottom, #f99637 0%, #fcb040 100%);
  background-image: linear-gradient(bottom, #f99637 0%, #fcb040 100%);
}
.product-categories .cat-item:hover a {
  text-shadow: 1px 1px 2px rgba(255, 255, 255, .6);
}
.product-categories .cat-item:hover a {
  text-shadow: 1px 1px 2px rgba(255, 255, 255, .6);
}
.product-categories > .cat-item:hover > a {
  color: #d20000 !important;
}
.product-categories > .cat-parent {
  padding-right: 15px;
}
.count {
  position: relative;
  display: none;
  top: 0px;
  right: 0px;
}
.product-categories > li .children > li a {
  width: 80%;
  padding: 5px;
  display: inline-block;
}
.product-categories > li {
  position: relative;
}
.product-categories > li .arrow {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 29px;
  height: 29px;
  border-left: 1px solid #dbdbdb;
  text-align: center;
  line-height: 29px;
  font-size: 16px;
  z-index: 2;
  color: #000;
  cursor: pointer;
}
.product-categories > li .arrow i {
  display: inline;
  margin: 0;
}
.children {
  display: none;
}
<script src="https://use.fontawesome.com/ea0959dcb8.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="product-categories highlighted">
  <li class="cat-item cat-item-49 cat-parent">
    <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
    <a href="http://inter-present.kz/catalog/biznes-suveniry/"><i class="fa fa-star"></i>
      <span class="heading">
        <span class="menu-title">Бизнес сувениры</span>
      </span>
    </a>
    <span class="count">(124)</span>

    <ul class="children">
      <li class="cat-item cat-item-52">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/bloknoty/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Блокноты</span>
          </span>
        </a>
        <span class="count">(8)</span>
      </li>
      <li class="cat-item cat-item-167">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/nabor-na-stol/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Набор на стол</span>
          </span>
        </a>
        <span class="count">(2)</span>
      </li>
      <li class="cat-item cat-item-55">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podarochnye-nabory/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подарочные наборы</span>
          </span>
        </a>
        <span class="count">(38)</span>
      </li>
      <li class="cat-item cat-item-53">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podstavki-pod-ruchki/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подставки под ручки</span>
          </span>
        </a>
        <span class="count">(12)</span>
      </li>
      <li class="cat-item cat-item-56">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/relaksanty-antistressy/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Релаксанты, антистрессы</span>
          </span>
        </a>
        <span class="count">(14)</span>
      </li>
    </ul>
  </li>
  <li class="cat-item cat-item-49 cat-parent">
    <a href="http://inter-present.kz/catalog/biznes-suveniry/"><i class="fa fa-star"></i>
      <span class="heading">
        <span class="menu-title">Бизнес сувениры</span>
      </span>
    </a>
    <span class="count">(124)</span>
    <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>

    <ul class="children">
      <li class="cat-item cat-item-52">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/bloknoty/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Блокноты</span>
          </span>
        </a>
        <span class="count">(8)</span>
      </li>
      <li class="cat-item cat-item-167">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/nabor-na-stol/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Набор на стол</span>
          </span>
        </a>
        <span class="count">(2)</span>
      </li>
      <li class="cat-item cat-item-55">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podarochnye-nabory/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подарочные наборы</span>
          </span>
        </a>
        <span class="count">(38)</span>
      </li>
      <li class="cat-item cat-item-53">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/podstavki-pod-ruchki/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Подставки под ручки</span>
          </span>
        </a>
        <span class="count">(12)</span>
      </li>
      <li class="cat-item cat-item-56">
        <span class="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
        <a href="http://inter-present.kz/catalog/biznes-suveniry/relaksanty-antistressy/"><i class="fa fa-star"></i>
          <span class="heading">
            <span class="menu-title">Релаксанты, антистрессы</span>
          </span>
        </a>
        <span class="count">(14)</span>
      </li>
    </ul>
  </li>
</ul>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.