0

私は 2 セットのアコーディオンを持っており、yes または no と答えると、他のアコーディオンが表示/非表示になります。

html

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
                <a id="yes" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Yes
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
            <label  for="nome_unico"><?php _e('Scrivi qui il tuo nome utente', 'usp'); ?></label>
            <p>Importante: Ricordati, scriviti o segnati comunque da qualche parte questo nome cosí come lo vedi ed utilizzalo per le prossime volte che scriverai una proposta.</p>
            <p><input id="nameField" name="nome_unico" placeholder="Scrivi il tuo nome" class="form-control input-lg usp-input"></p>
            <p class="alert alert-danger">Il tuo username da ricordare é tutto questo: <strong><span id="userNameMostra">...</span></strong></p>
            </div>
        </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a id="no" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                No
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <label  for="user-submitted-name"><?php _e('Se hai giá un nome utente, scrivilo qui', 'usp'); ?></label>
            <input class="form-control input-lg usp-input" id="userName" name="user-submitted-name" type="text" value="" data-required="true" required placeholder="Scrivi il tuo username">
        </div>
    </div>
</div>

jQuery

$("#yes").on("click", function(e){
e.preventDefault();
if($("#collapseOne").hasClass("in")) {
    return
} else {
    $("#collapseTwo").closest(".panel").toggleClass("hideField");
}
});

$("#no").on("click", function(e){
e.preventDefault();
if($("#collapseTwo").hasClass("in")) {
    return
} else {
    $("#collapseOne").closest(".panel").toggleClass("hideField");
}
});

これはhttp://jsfiddle.net/UNd6b/2/です- アコーディオンで「はい」をクリックしてみてください。何が起こるかを確認できます。「はい」をクリックするとパネルが展開され、「いいえ」をクリックすると非表示になり、その逆も同様です

4

2 に答える 2

1

これをチェックしてくださいhttp://jsfiddle.net/UNd6b/4/

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                    <a id="yes" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        Yes
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                <label  for="nome_unico"><?php _e('Scrivi qui il tuo nome utente', 'usp'); ?></label>
                <p>Importante: Ricordati, scriviti o segnati comunque da qualche parte questo nome cosí come lo vedi ed utilizzalo per le prossime volte che scriverai una proposta.</p>
                <p><input id="nameField" name="nome_unico" placeholder="Scrivi il tuo nome" class="form-control input-lg usp-input"></p>
                <p class="alert alert-danger">Il tuo username da ricordare é tutto questo: <strong><span id="userNameMostra">...</span></strong></p>
                </div>
            </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a id="no" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    No
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <label  for="user-submitted-name"><?php _e('Se hai giá un nome utente, scrivilo qui', 'usp'); ?></label>
                <input class="form-control input-lg usp-input" id="userName" name="user-submitted-name" type="text" value="" data-required="true" required placeholder="Scrivi il tuo username">
            </div>
        </div>
    </div>
</div>

$("#yes").on("click", function(e){
    e.preventDefault();
    if($("#collapseOne").hasClass("in")) {
        return
    } else {
        //$("#collapseTwo").closest(".panel").toggleClass("hideField");
    }
});

$("#no").on("click", function(e){
    e.preventDefault();
    if($("#collapseTwo").hasClass("in")) {
        return
    } else {
        //$("#collapseOne").closest(".panel").toggleClass("hideField");
    }
});
于 2013-09-16T09:59:57.860 に答える