jQuery 如何切换下拉箭头

How to toggle dropdown arrows

提问by David Passmore

This is the code i am using to hide and display div's with a slide toggle effect.

这是我用来隐藏和显示具有滑动切换效果的 div 的代码。

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

However i would like to add some toggled arrows to show that the toggled div is up or down.

但是我想添加一些切换箭头来显示切换的 div 是向上还是向下。

This is what i have so far and it does half of what i would like it to do:

这是我到目前为止所拥有的，它完成了我希望它做的一半：

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();
        });
});

This toggles the arrow but there are two problems:

这会切换箭头，但有两个问题：

1. The down arrow stays shown
2. Every div toggles every arrow so when some divs are up and one is down they all show as down.

1. 向下箭头保持显示
2. 每个 div 都会切换每个箭头，因此当一些 div 向上和一个向下时，它们都显示为向下。

Any ideas would be appriciated

任何想法都会被应用

回答by Roko C. Buljan

• Use :beforepseudo for decorative arrow icons
• Use jQuery's .toggleClass()

• 使用: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: "bc"; }
.option-heading.is-active:before { content: "b2"; }

/* 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: If you're using some different font-icons (like i.e: icomoon) than add the respective hex codes and also font-family: 'icomoon';to the :beforepseudo.

PS：如果您使用的是一些不同的字体图标（例如：icomoon）而不是添加相应的十六进制代码并添加font-family: 'icomoon';到:before伪代码中。

回答by papaiatis

Use classes!

使用类！

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");
        });
});

Then use CSS:

然后使用CSS：

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

回答by Solanki Arun

 $('.nav-arrow').on('click', function () {
    $(this).parents('.col-md-6').siblings().find('li').removeClass('subnav---open').find('ul').slideUp('fast');
    $(this).parent().toggleClass('subnav---open').find('ul').first().slideToggle('fast');
});