jQuery 手风琴，另外 div 待切换

Question

我正在尝试构建一个简单的 jQuery 手风琴，但在页面加载时，手风琴占页面宽度的 50%，另外 50% 有内容。打开手风琴时，内容将消失（使用 hide('slow'); 或 slideToggle('slow'); 滑出）并且手风琴将变为 100%。一次可以展开多个部分，但在所有部分都关闭之前，内容不会返回查看。

我现在拥有的东西在第一次点击时完美运行，内容开始并且手风琴打开和展开，关闭相同的部分也可以在它关闭和内容的地方工作 returns，但是如果我打开一个然后打开另一个内容 returns 和手风琴打开第二部分但回到 50%。

HTML:

<div class="wrapper">
    <div class="col-half left accord-left">
        <div class="accordion">
            <div class="section"><!-- first section -->
                <div class="title">
                    <h3>Clickable title 1</h3>
                </div>
                <div class="accord-text content-block" style="display: none;">
                    This is section text
                </div>
            </div>
            <div class="section"><!-- second section -->
                <div class="title">
                    <h3>Clickable title 1</h3>
                </div>
                <div class="accord-text content-block" style="display: none;">
                    This is section text
                </div>
            </div>
        </div>
    </div>
    <div class="col-half right accord-right content-block">
        This is the content to be removed when the accordion is open
    </div>
</div>

jQuery:

    jQuery('.accord-text').hide();
    jQuery('.section').click(function(){
        var secclick = jQuery(this);
        if(jQuery('.accord-text:visible').length) {
            jQuery('.accord-right').show('slow', function(){
                jQuery('.accord-left').addClass('col-half');
                jQuery('.accord-left').removeClass('col-full');
                jQuery('.accord-text',secclick).toggle("slow");
                jQuery('.title',secclick).toggleClass('open');
            });
        } else {
            jQuery('.accord-right').hide('slow', function(){
                jQuery('.accord-left').removeClass('col-half');
                jQuery('.accord-left').addClass('col-full');
                jQuery('.accord-text',secclick).toggle("slow");
                jQuery('.title',secclick).toggleClass('open');
            });
        }
    });

我认为它需要做的是检查是否点击了打开的部分，如果是则关闭该部分并显示右栏，但如果不是则打开新的部分并保留右栏隐藏了，我不知道怎么做。

Answer 1

我修改了 jQuery 所以当一个部分被点击时，它会 hide/keep 隐藏右栏， widen/keep 留在 100% 并切换手风琴 open/closed，然后在 1250 毫秒后（由于效果缓慢），它将通过检查文本部分的可见性来检查手风琴是否打开，如果它们全部关闭，则它将手风琴缩小回 50% 并滑动右列返回。

    jQuery('.accord-text').hide();
    jQuery('.section').click(function(){
        var secclick = jQuery(this);
        jQuery('.accord-right').hide();
        jQuery('.accord-left').addClass('col-full');
        jQuery('.accord-left').removeClass('col-half');
        jQuery('.title',this).toggleClass('open');
        jQuery('.accord-text',this).toggle("slow");
        setTimeout(function(){
            if(jQuery('.accord-text:visible').length) {
            } else {
                jQuery('.accord-left').removeClass('col-full');
                jQuery('.accord-left').addClass('col-half');
                jQuery('.accord-right').slideDown('slow');
            }
        },1250);            
    });

jQuery 手风琴，另外 div 待切换

jQuery accordion with additional div to be toggled

jquery

accordion

toggle