扰流板只适用于奇数

Question

当我想展开扰流板时，只有当页面上添加了奇数个扰流板时，它才起作用。

我怎么能解决这个问题，我也试着找到了。

HTML

<div class="kspoiler">
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
<?php echo $this->title; ?>
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button" id="kspoiler-show" value="<?php echo Text::_('COM_KUNENA_LIB_BBCODE_SPOILER_EXPAND'); ?>"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
<?php echo $this->content; ?>
</div>
</div>
</div>
</div>

JQuery

$('.kspoiler').each(function () {
$(document).on('click', '.kspoiler-expand', function (e) {
e.preventDefault()
var show = $(this.children[0]).val() === Joomla.getOptions('com_kunena.expand');
$(this.children[0]).val(show ? Joomla.getOptions('com_kunena.hide') : Joomla.getOptions('com_kunena.expand'));
$(this).parent().children('.kspoiler-wrapper').toggle()
});
});

Answer 1

由于我们没有Joomla her，所以我稍微简化了您的代码，并将Joomla.getOption('com_kunena.expand')更改为Joomla.com_kunena.expand。但在下面的代码片段中，您可以看到您的代码基本上可以工作——无论您有多少节。

然而，我删除了您的外部$('.kspoiler').each(function () {...}，因为这是完全多余的，并且会多次分配点击事件侦听器以相互抵消。这很可能是它只适用于奇数部分的原因！

当你处理多个部分时，你也必须小心保持你的id的唯一性！为了避免麻烦，我删除了你示例中的按钮Id。

var Joomla={com_kunena:{expand:"c'm on, show it!",hide:"quick - hide it!"}};
$('.btn-link').val(Joomla.com_kunena.expand);
$(document).on('click', '.kspoiler-expand', function (e) {
e.preventDefault()
var show = $(this.children[0]).val() === Joomla.com_kunena.expand;
$(this.children[0]).val(show ? Joomla.com_kunena.hide : Joomla.com_kunena.expand);
$(this).parent().children('.kspoiler-wrapper').toggle()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kspoiler">
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
1. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
2. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
3. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
4. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
</div><hr>
<div class="kspoiler">SECOND kspoiler DIV<br>
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
1. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
2. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
3. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
<div class="kspoiler-header">
<div class="kspoiler-title" style="display:inline-block;">
4. Title from PHP
</div>
<div class="kspoiler-expand" style="display:inline-block;">
<input class="btn-link" type="button"/>
</div>
<div class="kspoiler-wrapper" style="display:none;">
<div class="kspoiler-content">
Content from PHP
</div>
</div>
</div>
</div>