我观看/阅读/搜索了许多教程,但没有运气。 我坚持使用this tutorial。
我正在尝试使用JS(可能仅限CSS)来应用toogle acordion效果而不将目标添加到div。
有两个显示内容的选项:
我不介意,你选择哪个选项来解决这个问题。
我无法更改 ID元素的任何属性(例如id =“div1”,id =“div2”,...)
我的目标是制作图片中的内容:
<div class="widget widgetFaq clearfix">
<div class="widgetTitle">
<h2>FAQ</h2>
</div>
<div class="widgetContent clearfix">
<div class="box boxFaq clearfix">
<div class="boxTitle">
<h3>Question one?</h3>
<button> show </button>
</div>
<div class="boxContent clearfix toggle">
<p>Answer to the question. Answer to the question. Answer to the question. </p>
</div>
</div>
<div class="box boxFaq clearfix">
<div class="boxTitle">
<h3>Question second?</h3>
<button> show </button>
</div>
<div class="boxContent clearfix toggle">
<p>Answer to the question. Answer to the question. Answer to the question. </p>
</div>
</div>
</div>
</div>
$(document).ready(function(){
$('button').click(function() {
$(this).next('.toggle').slideToggle();
});
});
(将<button>show</button>
放在boxTitle
div之后)
$(document).ready(function() {
$('button').click(function() {
$(this).next('.toggle').slideToggle();
if ($(this).text() === '+') {
$(this).html('-');
}
else {
$(this).html('+');
}
});
});
答案 0 :(得分:0)
$(this).parent().next('.toggle').slideToggle();