基本上我试图找到下一个'sacc-trigger',但'next()'不起作用,因为它嵌套在一个列表中;我尝试了许多变体,例如 parent().next() 但我无法让它工作。
也许如果有人能给我指个方向;会好的。
我有以下 HTML 代码:
<ul class="taxo2">
<li class="">
<div class="sacc-trigger active" style="width: 0px;">
Photos
</div>
<div class="sacc-container" style="display: block; width: 0px;">
</div>
</li>
<li class="">
<div class="sacc-trigger" style="width: 0px;">
Statements
</div>
<div class="sacc-container" style="display: none; width: 0px;">
</div>
</li>
<li class="">
<div class="sacc-trigger" style="width: 0px;">
Powerpoint Presentations
</div>
<div class="sacc-container" style="display: none; width: 0px;">
</div>
</li>
<li class="">
<div class="sacc-trigger" style="width: 0px;">
Videos/Interviews
</div>
<div class="sacc-container" style="display: none; width: 0px;">
</div>
</li>
</ul>
并尝试使其与 jQuery Accordion 一起使用;有以下我正在尝试调整的来源:
(function() {
var $container = $('.sacc-container'), $trigger = $('.sacc-trigger');
$container.hide();
$trigger.first().addClass('active').next().show();
var fullWidth = $container.outerWidth(true);
$trigger.css('width', fullWidth);
$container.css('width', fullWidth);
$trigger.on('click', function(e) {
if ($(this).next().is(':hidden')) {
alert('here2');
$trigger.removeClass('active').next().slideUp(300);
$(this).toggleClass('active').next().slideDown(300);
}
e.preventDefault();
});
// Resize
$(window).on('resize', function() {
fullWidth = $container.outerWidth(true)
$trigger.css('width', $trigger.parent().width());
$container.css('width', $container.parent().width());
});
})();