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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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