There is a vertical menu multi-level menu. It is necessary to make it so that when you click on a list item, its contents are expanded. Actually, the problem is that my script collapses / expands all the elements of the list at once) Please tell me what to change in it.

Upd: the variant with the use of the .next method in my case does not fit, since the actions must occur when clicking on .arrow, and the partition with this class is not adjacent to .children. I cannot change their order.

$(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>

  • Possible duplicate question: Opening one submenu, but not all at once - stackanon
  • .next will not work here - it is necessary that the actions take place when you click on .arrow, and the sleeper with this class is not adjacent to .children. I cannot change their order. Here a little code is inserted, now I'll fix it. - Igor

1 answer 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>