Question

我正在努力改变JS / PHP以确保在页面首次加载时关闭第一个切换。

这是控制切换的PHP：

            function wave_shortcode_accordion($attr, $content = null) {


            $attr = shortcode_atts(array(
                'style'           => "default",
                'animation'       => "",
                'animation_time'  => 1500,
                'animation_delay' => 0
            ), $attr);

            if (!empty($attr['animation'])) {
                $attr_animation = '';
                $attr_animation .= ' data-animation="' . $attr['animation'] . '"';
                $attr_animation .= ' data-animation-time="' . $attr['animation_time'] . '"';
                $attr_animation .= ' data-animation-delay="' . $attr['animation_delay'] . '"';
            } else {
                $attr_animation = '';
            }

            $html = '<div class="toggles single ' . $attr['style'] . '"' . $attr_animation . '>' . do_shortcode($content) . '</div>';

            return $html;
        }

        function wave_shortcode_toggles($attr, $content = null) {

            $attr = shortcode_atts(array(
                'style'           => "default",
                'animation'       => "",
                'animation_time'  => 1500,
                'animation_delay' => 0
            ), $attr);

            if (!empty($attr['animation'])) {
                $attr_animation = '';
                $attr_animation .= ' data-animation="' . $attr['animation'] . '"';
                $attr_animation .= ' data-animation-time="' . $attr['animation_time'] . '"';
                $attr_animation .= ' data-animation-delay="' . $attr['animation_delay'] . '"';
            } else {
                $attr_animation = '';
            }

            $html = '<div class="toggles multi ' . $attr['style'] . '"' . $attr_animation . '>' . do_shortcode($content) . '</div>';

            return $html;
        }

        function wave_shortcode_toggle($attr, $content = null) {

            $attr = shortcode_atts(array(
                'title'  => "",
                'status' => ""
            ), $attr);

            $status = "";

            if ($attr['status'] == "open") {
                $status = "active";
            } elseif($attr['status'] == "closed") {
                $status = "inactive";
            }

            $html = '';
            $html .= '<div class="toggle">';
            $html .= '<h3><i class="icon-chevron-right"></i><span>' . $attr['title'] . '</span></h3>';
            $html .= '<div class="toggle-content">';
            $html .= '<div class="toggle-content-inner">' . do_shortcode($content) . '</div>';
            $html .= '</div>';
            $html .= '</div>';

            return $html;
        }

这是JS：

 $('.toggles.multi').accordion({
    header: "h3",
    active: false,
    collapsible: true,
    beforeActivate: function (event, ui) {
        if (ui.newHeader[0]) {
            var currHeader = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        } else {
            var currHeader = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }

        var isPanelSelected = currHeader.attr('aria-selected') == 'true';
        currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
        currContent.toggleClass('accordion-content-active', !isPanelSelected)

        if (isPanelSelected) {
            currContent.slideUp();
        } else {
            currContent.slideDown();
        }

        return false;
    }
});

任何帮助将不胜感激！ :)

Answer 1

如果你正在使用jquery UI手风琴，第一个div会像here一样自动关闭，但不知道这不是你的情况。我们可以尝试在页面加载时强制关闭，尝试在jQuery手风琴代码之后粘贴这些行：

编辑代码：

<script>
jQuery(function($){
    jQuery('div.toggles').each(function() {
       $('div.toggle',$(this)).first().find('h3').removeClass('accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr('aria-selected',false);
        alert( $('div.toggle',this).find('h3').attr('id'));
       $('div.toggle',$(this)).first().find('.toggle-content').removeClass('accordion-content-active').css('display','none');
    });
});
</script>

我已经修改了一些代码以满足更多功能：

您的页面上有多个手风琴，此代码将关闭所有手风琴的第一个切换。
额外属性aria-selected已设置为false。如果没有这个，你必须点击第一个切换两次才能打开它。

如果可能，将整个代码粘贴到页面末尾的脚本标记。我已经发出了alert()消息，这应该显示三个切换的h3 ids（您可以稍后删除此行）。我保留它，以便您知道代码是否正在执行。如果alert()框未显示，则表示上述代码未执行，您应检查控制台是否有错误或将其放在其他位置。

最初首先关闭

1 个答案:

编辑代码：