我有以下代码组合:
index.html
<body>
<div class="checkout">
<input type="checkbox" id="cc" checked>
<label for="cc">
<div class="tab cc">
<h3 class="tab__title">Credit Card<span class="fa fa-check"></span></h3>
<div class="tab__content">
<div class="input-group">
<input type="text" class="full cc-number" placeholder="Card Number">
<input type="text" class="expiry" placeholder="MM / YY"><input type="text" class="cvc" placeholder="CVC">
<input type="checkbox" id="remember"><label for="remember">Remember me</label>
<button type="button" class="button--action button--circle">GO</button>
</div>
</div>
</div>
</label>
<input type="checkbox" id="agreement">
<label for="agreement">
<div class="tab agreement">
<h3 class="tab__title">Agreement<span class="fa fa-check"></h3>
<div class="tab__content">
<div class="agreement__text">
<p>Kombucha offal kale chips semiotics, health goth shoreditch craft beer pickled occupy gentrify wayfarers franzen. Fanny pack crucifix jean shorts portland mumblecore chartreuse. Yr migas scenester, hoodie artisan fap chicharrones brunch ramps. Waistcoat venmo austin photo booth 90's affogato, viral craft beer readymade iPhone fashion axe. Cliche health goth cold-pressed cronut banjo selfies ennui synth locavore, etsy hoodie ethical. Synth everyday carry small batch, try-hard photo booth green juice tumblr farm-to-table normcore. Irony kinfolk fanny pack, beard scenester drinking vinegar asymmetrical man braid helvetica venmo chicharrones.
</p>
</div>
</div>
</div>
</label>
... More code
索引.js
(function() {
var tabs = $('.tab');
tabs.on('click', function(e) {
var checkbox = $(this).parents('label').prev();
// Fix for all tabs collapsing when click is within the area taken up by a button
if (e.target.tagName === 'BUTTON') {
$(checkbox).prop('checked', true);
}
// Don't collapse the currently open tab when clicked on
if (checkbox.is(':checked')) {
e.preventDefault();
}
// Allow only one tab to be open at a time
checkbox.siblings('input:checkbox').prop('checked', false);
});
})();
我也有一些 CSS，但我认为它不是非常相关。 该代码有不同的选项卡，单击一个选项卡将打开它并关闭打开的选项卡。如何制作一个按钮来打开紧随其后的选项卡？每个选项卡都是
最佳答案
在按钮上添加 click 功能和一些 jQuery 的乐趣:
$('.openNext').on('click',function(e){
e.stopImmediatePropagation();
$(this).closest('label').next('input').next('label').find('h3').trigger('click');
});
更新的 fiddle :https://jsfiddle.net/x7kredj0/7/
关于javascript - 如何在单击按钮时展开下一部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43445885/