0

Как сделать так чтобы при клике на каждый брэнд он оставался открытым с выпадающим списком категорий внутри. К примеру кликнул, и остается открытым, чтобы дать пользователю понять что есть категорию как в скрине. Ссылка на проект http://vca.kz/

введите сюда описание изображения

$('.click-pr').click(function(){
    $('.show-pr').slideToggle();
});
$('.click-pr2').click(function(){
    $('.show-pr2').slideToggle();
});
$('.click-pr3').click(function(){
    $('.show-pr3').slideToggle();
});
$('.click-pr4').click(function(){
    $('.show-pr4').slideToggle();
});
$('.click-pr5').click(function(){
    $('.show-pr5').slideToggle();
});
$('.click-pr6').click(function(){
    $('.show-pr6').slideToggle();
});

HTML:

<div class="goods-widget col-lg-3 col-md-3 col-sm-12 col-xs-12">
    <h3>Продукция</h3>
    <div class="click-pr">
        <a href="produkcziya/kartochka-tovara/ottogi">OTTOGI</a>
    </div>
    <div class="show-pr">
        <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/ramen">Рамен</a> <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/suxari">Сухари</a> <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/klyar">Кляр</a> <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/kunzhutnoe-maslo">Кунжутное масло</a>
    </div>
    <div class="click-pr2">
        <a href="produkcziya/kartochka-tovara/sajo-hapyo">Sajo Hapyo</a>
    </div>
    <div class="show-pr2"></div>
    <div class="click-pr3">
        <a href="produkcziya/kartochka-tovara/natura-bogata">Natura Bogata</a>
    </div>
    <div class="show-pr3"></div>
    <div class="click-pr4">
        <a href="produkcziya/kartochka-tovara/too-malu">ТОО Малу</a>
    </div>
    <div class="show-pr4"></div>
    <div class="click-pr5">
        <a href="produkcziya/kartochka-tovara/dongsuh">Dongsuh</a>
    </div>
    <div class="show-pr5">
        <a class="category-pr" href="produkcziya/kartochka-tovara/dongsuh/suxie-slivki">Сухие сливки</a> <a class="category-pr" href="produkcziya/kartochka-tovara/dongsuh/suxoe-moloko">Сухое молоко</a>
    </div>
    <div class="click-pr6">
        <a href="produkcziya/kartochka-tovara/ooo-maj">ООО Май</a>
    </div>
    <div class="show-pr6">
        <a class="category-pr" href="produkcziya/kartochka-tovara/ooo-maj/chaj">Чай</a>
    </div>
</div>
1
  • 1
    Все просто, записываешь в куки что сайдбар открыт/закрыт и готово
    – user245150
    17 авг 2017 в 9:44

1 ответ 1

2

Если я правильно понял ваш вопрос, вам нужно это:

'use strict';

$('.dropdown-toggle a').click(function(event) {
  event.preventDefault();
  $(event.target).parent('.dropdown-toggle').next('.dropdown-menu').slideToggle('fast');
});
.hide {
  display: none;
}

.dropdown-menu a {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="goods-widget col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <h3>Продукция</h3>
  <div class="dropdown-toggle"> <a href="produkcziya/kartochka-tovara/ottogi">OTTOGI</a> </div>
  <div class="dropdown-menu hide"> <a class="category-pr" href="#">Рамен</a> <a class="category-pr" href="#">Сухари</a> <a class="category-pr" href="#">Кляр</a> <a class="category-pr" href="#">Кунжутное масло</a> </div>
  <div class="dropdown-toggle"> <a href="produkcziya/kartochka-tovara/sajo-hapyo">Sajo Hapyo</a> </div>
  <div class="dropdown-menu hide"> <a class="category-pr" href="#">Рамен</a> <a class="category-pr" href="#">Сухари</a> <a class="category-pr" href="#">Кляр</a> <a class="category-pr" href="#">Кунжутное масло</a> </div>
  <div class="dropdown-toggle"> <a href="produkcziya/kartochka-tovara/natura-bogata">Natura Bogata</a> </div>
  <div class="dropdown-menu hide"> <a class="category-pr" href="#">Рамен</a> <a class="category-pr" href="#">Сухари</a> <a class="category-pr" href="#">Кляр</a> <a class="category-pr" href="#">Кунжутное масло</a> </div>
</div>

  • Переключателю(при клике на который будет открываться список ниже) задавайте класс dropdown-toggle.
  • Списку(который будет появляться/исчезать) задавайте класс dropdown-menu и hide.

У вас неоптимально написан HTML в данном блоке, я брал код из вашего примера, но лучше(если это возможно) переписать HTML. Я могу написать пример корректного HTML + JS.

Ваш ответ

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

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