javascript - 最初关闭第一个开关

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 Accordion ，第一个 div 将自动关闭，如 here 所示，但不知何故，这不是你的情况。我们可以尝试在页面加载时强制关闭它，尝试将这些行粘贴到 jQuery Accordion 代码之后:

编辑后的代码:

<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>

我对代码做了一些修改以满足更多功能:

1. 您的页面上有多个 Accordion ，此代码将关闭所有 Accordion 的第一个开关。
2. 额外属性 aria-selected 已设置为 false。如果没有这个，您将必须单击第一个开关两次才能将其打开。

如果可能，将带有脚本标记的整个代码粘贴到页面末尾。我已经设置了 alert() 消息，这应该显示三个切换的 h3 ids (您可以稍后删除此行)。我保留它是为了让您知道代码是否被执行。如果 alert() 框没有显示，则意味着上面的代码没有被执行，您应该检查控制台是否有错误或将其放在其他地方。