我正在尝试制作一个手风琴,它的第一个选项卡打开。一个按钮应打开下一个选项卡,然后关闭上一个选项卡。 到目前为止,它只是关闭选项卡,但不会打开下一个选项卡,我很难弄清楚如何使其工作。
$(document).ready(function() {
$('.cat').click(function() {
$(this).parent().slideUp('fast');
$(".a-content").next().css('display', 'block');
});
});
.a-toggle {
cursor: pointer;
margin: 0;
}
.a-content {
display: none;
}
.a-content.default {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a-section">
<h4 class="a-toggle">1. Title</h4>
<div class="a-content default">
<p>Some text</p>
<button type="button" class="cat">Continue</button>
</div>
<h4 class="a-toggle">2. Title</h4>
<div class="a-content">
<p>More text</p>
<button type="button" class="cat">Continue</button>
</div>
<h4 class="a-toggle">3. Title</h4>
<div class="a-content">
<p>Even more text</p>
<button type="button" class="cat">Continue</button>
</div>
</div>
答案 0 :(得分:0)
$(document).ready(function() {
$('.cat').click(function() {
const parent = $(this).parent();
parent.slideToggle();
const next = parent.next().next();
next.slideToggle();
});
});
.a-toggle {
cursor: pointer;
margin: 0;
}
.a-content {
display: none;
}
.a-content.default {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a-section">
<h4 class="a-toggle">1. Title</h4>
<div class="a-content default">
<p>Some text</p>
<button type="button" class="cat">Continue</button>
</div>
<h4 class="a-toggle">2. Title</h4>
<div class="a-content">
<p>More text</p>
<button type="button" class="cat">Continue</button>
</div>
<h4 class="a-toggle">3. Title</h4>
<div class="a-content">
<p>Even more text</p>
</div>
</div>
答案 1 :(得分:-1)
一线解决方案
您需要两件事:
next()
,因为.a-content
本身不是下一个兄弟姐妹,它之间有h4
$(this)
您可以通过添加类而不是将CSS设置为内联方式来改善这一点
$('.cat').click(function() {
$(this).parent().slideUp('fast').next().next().addClass('open'); //SlideToggle will work too
});
.a-toggle {
cursor: pointer;
margin: 0;
}
.a-content {
display: none;
}
.a-content.default, .a-content.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a-section">
<h4 class="a-toggle">1. Title</h4>
<div class="a-content default">
<p>Some text</p>
<button type="button" class="cat">Continue</button>
</div>
<h4 class="a-toggle">2. Title</h4>
<div class="a-content">
<p>More text</p>
<button type="button" class="cat">Continue</button>
</div>
<h4 class="a-toggle">3. Title</h4>
<div class="a-content">
<p>Even more text</p>
<button type="button" class="cat">Continue</button>
</div>
</div>
答案 2 :(得分:-1)
尝试一下
$(document).ready(function() {
$('.cat').click(function() {
const $parent = $(this).parent();
$parent.slideUp('fast');
$parent.nextUntil(".a-content").next().css('display', 'block');
});
});