Как переключить стрелки раскрывающегося списка

Это код, который я использую для скрытия и отображения div с эффектом переключения слайдов.

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
        });
    });

Однако я хотел бы добавить несколько переключаемых стрелок, чтобы показать, что переключаемый div находится вверху или внизу.

Это то, что у меня есть до сих пор, и оно делает половину того, что я хотел бы сделать:

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery("#arrow-up").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
            jQuery("#arrow-up").toggle();
            jQuery("#arrow-down").toggle();
        });
});

Это переключает стрелку, но есть две проблемы:

  1. Стрелка вниз остается показанной
  2. Каждый div переключает каждую стрелку, поэтому, когда некоторые div находятся вверху, а один — внизу, все они отображаются как down.

Любые идеи будут оценены


jquery slidetoggle
person David Passmore    schedule 23.02.2012    source источник

Ответы (3)


arrow_upward
18
arrow_downward

  • Используйте псевдоним :before для декоративных значков со стрелками.
  • Используйте jQuery .toggleClass()

jQuery(function($) { // DOM ready and $ alias in scope

  /**
   * Option dropdowns. Slide toggle
   */
  $(".option-heading").on('click', function() {
    $(this).toggleClass('is-active').next(".option-content").stop().slideToggle(500);
  });

});
.option-heading:before           { content: "\25bc"; }
.option-heading.is-active:before { content: "\25b2"; }

/* Helpers */
.is-hidden { display: none; }
<div class="option-heading">HEADING</div>
<div class="option-content is-hidden">
  content<br>content<br>content<br>content<br>content<br>content<br>content
</div>

<script src="//code.jquery.com/jquery-3.3.1.js"></script>

P.S: Если вы используете несколько разных значков шрифтов (например, icomoon), добавьте соответствующие шестнадцатеричные коды, а также font-family: 'icomoon'; к :before псевдо.

person Roko C. Buljan    schedule 23.02.2012

arrow_upward
2
arrow_downward

Используйте классы!

jQuery(document).ready(function() {
    jQuery(".option-content").hide().removeClass("shown").addClass("hidden");
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500)
                  .removeClass("hidden").addClass("shown");
        });
});

Затем используйте CSS:

.option-content.hidden{ background-image:url(hidden.png); } 
.option-content.shown{ background-image:url(shown.png); }
person papaiatis    schedule 23.02.2012

arrow_upward

arrow_downward

person    schedule
comment
Привет, Соланки. Это может ответить на вопрос, но было бы лучше, если бы вы объяснили, почему это решение работает, на более полном примере. - person ste-fu; 29.10.2018