0

我有 2 套手风琴，通过回答是或否来隐藏/显示另一套。

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 回答
0

你愿意这样做吗？？

http://jsfiddle.net/UNd6b/6/

$("#yes").on("click", function(e){
    e.preventDefault();
    if($("#collapseOne").hasClass("in")) {
        $("#collapseTwo").parent().show();
        return
    } else {
        $("#collapseTwo").parent().toggle();
    }
});

$("#no").on("click", function(e){
    e.preventDefault();
    if($("#collapseTwo").hasClass("in")) {
        $("#collapseOne").parent().show();
        return
    } else {
        $("#collapseOne").parent().toggle();
    }
});
于 2013-09-16T09:54:29.067 回答