jquery - 如何使我无法关闭 jQuery Accordion 的所有部分

Question

在下面的 Accordion 中，我如何才能使一个部分必须始终打开(即我不能在任何时候关闭所有部分)。这是出于审美原因所希望的。非常感谢。

HTML:

<div class="accordion">

    <div class="accordionSection"><a class="accordionSectionTitle active" href="#accordion1" id="accordionSectionTitle1">What information do I need from you?</a>
        <div id="accordion1" class="accordionSectionContent open">
            <p>Helpful info</p>
        </div>
    </div>

    <div class="accordionSection"><a class="accordionSectionTitle" href="#accordion2" id="accordionSectionTitle2">How long will it take?</a>
        <div id="accordion2" class="accordionSectionContent">
            <p>An estimate of time</p>
        </div>
    </div>

    <div class="accordionSection"><a class="accordionSectionTitle" href="#accordion3" id="accordionSectionTitle3">How do I?</a>
        <div id="accordion3" class="accordionSectionContent">
            <p>.</p>
        </div>
    </div>

</div>

CSS:

.accordion, .accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.accordion {
    overflow: hidden;
    border-radius: 5px;
    background: #F0F0F0;
    border: 1px solid black;
}

.accordion a {
    text-decoration: none;
}

    /*Section Titles*/

.accordionSectionTitle {
    width: 100%;
    padding: 5px 10px 5px 10px;
    display: inline-block;
    border-bottom: 1px solid #1a1a1a;
    transition: all linear 0.15s;
    font-size: 0.95em;
    text-shadow: black 0.2em 0.2em 0.2em;
    font-weight: none;
    color: white;
}

.accordionSectionTitle.active, .accordionSectionTitle:hover {
    background: #4c4c4c;
    text-decoration: none;
}

.accordionSection:last-child .accordionSectionTitle {
    border-bottom: none;
}

    /* Sect Content */

.accordionSectionContent {
    padding: 5px 10px 5px 10px;
    display: none;
    height: 181px;
    font-size: 0.95em;
}

jQuery:

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordionSectionTitle').removeClass('active');
        $('.accordion .accordionSectionContent').slideUp(300).removeClass('open');
    }

    $('.accordionSectionTitle').click(function(e) {
        var currentAttrValue = $(this).attr('href');

        if ($(e.target).is('.active')) {
            close_accordion_section();
        } else {
            close_accordion_section();

            $(this).addClass('active');
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }

        e.preventDefault();
    });
});

Answer 1

http://jsfiddle.net/b00x4mfd/1/

检查是否有任何其他部分打开，如果是则关闭此部分，否则不要关闭它。

你的 JS 会变成这样:

function close_accordion_section() {
    $('.accordion .accordionSectionTitle').removeClass('active');
    $('.accordion .accordionSectionContent').slideUp(300).removeClass('open');
}

$('.accordionSectionTitle').click(function(e) {
    var currentAttrValue = $(this).attr('href');

    if($(e.target).is('.active')) {
        /*search for any open accordian*/
        if($(".accordionSectionTitle").not("#"+$(this).attr('id')).hasClass('active')){
            close_accordion_section();
        }


    }else {

        close_accordion_section();

        $(this).addClass('active');
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
});