这是我用来隐藏和显示带滑动切换效果的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();
});
});
这会切换箭头,但有两个问题：
>向下箭头保持显示
>每个div都会切换每个箭头,所以当一些div上升而另一个下来时,它们都表现为向下.
任何想法都会受到关注
解决方法
jQuery(function($) {
$(".option-heading").click(function() {
$(this).next(".option-content").stop().slideToggle(500);
$(this).find(".arrow-up,.arrow-down").toggle();
});
});
.option-heading{background:#ddd; cursor:pointer;}
.option-content{background:#eee;}
/* Notice this class ! */
.is-hidden{ display: none; }
<div class="option-heading"> <span class="arrow-up is-hidden">▲</span> <span class="arrow-down">▼</span> 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.1.0.js"></script>
