Question

在下面的手风琴中，我该如何制作，以便一个部分必须始终打开（即所以我不能同时关闭所有部分）。出于美学原因，这是期望的。非常感谢。

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();
});

如何使我无法关闭jQuery手风琴的所有部分

1 个答案: