Спойлер работает только с нечетными номерами

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 в SO, я немного упростил ваш код и изменил Joomla.getOption('com_kunena.expand') на Joomla.com_kunena.expand. Но в следующем фрагменте вы можете увидеть, что ваш код в основном работает - независимо от того, сколько у вас разделов.

Однако я удалил ваш внешний $('.kspoiler').each(function () {...}, поскольку он совершенно лишний и назначит прослушиватель события щелчка несколько раз , отменяющий друг друга. Скорее всего, это причина того, что он работал только с нечетным числом разделов!

Когда вы имеете дело с несколькими разделами, вы также должны быть осторожны, чтобы ваши 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>