这是我使用隐藏,并用幻灯片切换效果显示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();
});
});
这将切换箭头,但有两个问题:
任何想法,将不胜感激
:before
伪装饰箭头图标.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
伪。
使用类!
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); }
$('.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');
});