jQuery手风琴风格常见问题解答+和 -
问题描述:
我正在尝试使用常见问题手风琴+和 - 在问题前的标志like this.它几乎可以工作,除非再次单击打开的部分时,minus保持为减号。有什么办法可以让它成为一个加分?我试图写第一条评论线,但它似乎没有工作。要小心,我不知道我在用jQuery做什么,只是根据我在其他语言中看到和了解的内容进行了修改。jQuery手风琴风格常见问题解答+和 -
$('#accordion').find('.accordion-toggle').click(function(){
//Check if this panel is minus and change it to plus *** THIS DOESN'T WORK ***
if($('img', this).attr('src') == 'minus.png'){
$('img', this).attr('src', 'plus.png');
}
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Change this panel to minu
$('img', this).attr('src','minus.png');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
//Change other panels to plus
$(".accordion-toggle img").not($('img', this)).attr('src', 'plus.png');
});
<!-- CSS -->
<style>
.accordion-toggle {margin-top: 10px; cursor: pointer; background-color: #F0F0F0; padding: 16px 24px 19px 0px;}
.accordion-toggle h4 { line-height: 26px; font-weight: 600;}
.accordion-content {display: none; background-color: #F0F0F0; padding: 1px 425px 34px 56px; line-height: 25px; }
.accordion-content.default {display: block;}
#accordion {
font-family: "Open Sans"; color: #0D253E; font-size: 16px;
}
.plus {
margin: 3px 16px 3px 20px; float: left;
}
</style>
<!-- HTML -->
<div id="accordion">
<div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div>
<div class="accordion-content">
<p>Content text</p>
</div>
<div class="accordion-toggle"><img class="plus" src="plus.png" height="20px"/><h4>Question?</h4></div>
<div class="accordion-content">
<p>Content text</p>
</div>
<div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div>
<div class="accordion-content">
<p>Content text</p>
</div>
<div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div>
<div class="accordion-content">
<p>Content text</p>
</div>
</div>
答
您可能需要改变你叫里面每一个你div.accordion-toggle
DOM元素(一个或多个)
$('#accordion').find('.accordion-toggle').click(function() {
// Check if this panel is minus and change it to plus *** THIS DOESN'T WORK ***
// @eeya: Change it like this: (Find every img elements
// under the .accordion-toggle element that called
// the event listener
if ($(this).find('img').attr('src') === 'minus.png') {
$(this).find('img').attr('src', 'plus.png');
}
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Change this panel to minu
$('img', this).attr('src','minus.png');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
//Change other panels to plus
$(".accordion-toggle img").not($('img', this)).attr('src', 'plus.png');
});
希望你img
属性的方式这有助于你的情况。
+0
)可惜的是,这并没有改变任何东西,我想知道它为什么不起作用,理论上它应该是吧? –
+0
是,这里的主要目标是在所选的'div.accordion-toggle'被选中时将'plus'图像更改为'minus'图像? – eeya
您是否检查过bootstrap的手风琴例子? https://v4-alpha.getbootstrap.com/components/collapse/#accordion-example – eeya
@eeya看起来很酷且很简单。问题是,我真的很喜欢jQuery,如果可能的话,我想做这个工作。如果我做不到,我可能会开始学习,但我现在没有时间。尽管感谢您的链接! –
你能不能更新你的问题,包括你的'html'和'css'? – eeya