1

Я сделал разворачивание, а сворачивание что-то не получается - как сделать?

$(document).ready(function() {
    $(".catalogEntryItem").each(function() {
        $(this).on("click",".catalogEntryItemTitle", function() {
            $(this).toggleClass("active");
            $(this).find("i").toggleClass("arrowDown");
            $(this).parent().find(".catalogEntryItemList").slideToggle();
            return false;
        });
    });
});

http://codepen.io/anon/pen/JYVRBy Собственно сабж. Всем спасибо.

$(document).ready(function() {
  $(".catalogEntryItem").each(function() {
    $(this).on("click",".catalogEntryItemTitle", function() {
      $(this).toggleClass("active");
      $(this).find("i").toggleClass("arrowDown");
      $(this).parent().find(".catalogEntryItemList").slideToggle();
      return false;
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
  <div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
  <div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
  <div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
  <div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
  <div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>


Дополнение:

Для тех, кто не знает, аккордеон - это набор сворачиваемых блоков, среди которых одновременно только один (или не более одного) может быть в развёрнутом состоянии.

28
  • 1
    Ну хотя бы "заАккордеонить" написал. В общем, вопрос как сделать аккордеон.
    – Qwertiy
    20 ноя 2015 в 17:10
  • 3
    @Qwertiy, как бы то ни было, вопрос "как сделать аккордеон" + портянка кода -- это плохой вопрос 20 ноя 2015 в 17:13
  • 1
    @DmitriySimushev: Но два ответа с суммарным +4 за полчаса дают надежду, что вопрос не так уж плох и скорее всего спасабелен.
    – VladD
    20 ноя 2015 в 17:42
  • 2
    @VladD, вопрос вполне обычный. Его заминусовали за заголовок, который я понял с третьего прочтения, кстати.
    – Qwertiy
    20 ноя 2015 в 17:50
  • 1
    Если кто-нибудь понимает, как вопрос (точнее его заголовок) можно переформулировать - спасайте вопрос)
    – ЮрийСПб
    20 ноя 2015 в 19:48

2 ответа 2

5
  1. Чем не угодил аккордеон из jQueryUI?
    https://jqueryui.com/accordion/

  2. Можно вообще только на css такое сделать:
    Изменение изображения ссылки при нажатии - надо только добавить input'ам одинаковый name и сменить type на radio.

  3. Странный код, лучше переделай.

  4. Возможно, так:

    $(".catalogEntryItem.active").not(this)
      .toggleClass("active")
      .find("i").toggleClass("arrowDown");
    
8
  • 2 ответа ссылки + комментарий 20 ноя 2015 в 17:16
  • @DmitriySimushev, теперь с кодом. Доволен?
    – Qwertiy
    20 ноя 2015 в 17:22
  • Буду доволен когда перестанете тыкать ;) 20 ноя 2015 в 17:22
  • @DmitriySimushev, я всегда на программистских сайтах общаюсь на ты. Не стоит воспринимать это негативно, просто привычка :) Кстати, в большинстве мест так и принято.
    – Qwertiy
    20 ноя 2015 в 17:23
  • 3
    @ОнотолЕ, а у меня на чём? о_О
    – Qwertiy
    20 ноя 2015 в 17:27
2

each - в данном случае не нужен, метод on может применяться к коллекции элементов.

Далее идея - выбираем активные элементы, кроме текущего, сбрасываем все, потом выбираем элемент по которому кликнули и выставляем нужные стили.

$(document).ready(function() {
    $(".catalogEntryItem").on("click",".catalogEntryItemTitle", function() {
        $('.active').not(this)
                    .removeClass('active')
                    .find('i').removeClass("arrowDown")
                    .end()
                    .next().slideToggle();;
        $(this).toggleClass('active')
               .find('i').toggleClass("arrowDown")
               .end()
               .next().slideToggle();;

        return false;
    })
});

Можно даже вынести применение стилей в функцию

$(document).ready(function() {
    function toggleStyle(elem){
        elem.toggleClass('active')
            .find('i').toggleClass("arrowDown")
            .end()
            .next().slideToggle();
    }

    $(".catalogEntryItem").on("click",".catalogEntryItemTitle", function() {
        toggleStyle($('.active').not(this));
        toggleStyle($(this));

        return false;
    })
});
8
  • А этот код можно в jquery Cookie как нибудь засунуть? 20 ноя 2015 в 17:45
  • @ОнотолЕ, что вы имеет ввиду? :) Правьте сразу исходный пост
    – Grundy
    20 ноя 2015 в 17:46
  • toggleStyle($('.active').not(this)); toggleStyle($(this)); - ты что-то перемудрил...
    – Qwertiy
    20 ноя 2015 в 17:50
  • @Qwertiy, почему? :-) сначала ищем всех активных кроме текущего - применяем к ним toggle потом для текущего делаем то же самое - все правильно вроде
    – Grundy
    20 ноя 2015 в 17:52
  • Если он уже active, то это делает одно и то же. Если это не так, то not(this) лишний. И вообще, похоже, надо toggleStyle($('.active').add(this)), после чего функция снова выпиливается.
    – Qwertiy
    20 ноя 2015 в 17:53

Ваш ответ

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

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