0

以下に示すように、別々のフィールドセットにログインと登録フォームがあります。 

<fieldset class="login selected">
    <legend class="login_link">Login</legend>
    <div class="form_container">
        <form id="loginform">
            [loginform]
        </form>
    </div>
</fieldset>
<fieldset class="reg">
    <legend class="registration_link">Registration</legend>
    <div class="form_container clearfix">
        <form id="regform">
            [regform]
       </form>
    </div>
</fieldset>

1つは開いており、もう1つはcssスタイルでデフォルトで閉じられています 

.login .form_container {
    display: block;
}
.reg .form_container {
    display: none;
}
fieldset {
    border: none;
}
.selected {
    border: 1px inset #000;
}
legend {
    background: #ccc;
    cursor: pointer;
}

fieldset-sは、jQueryを使用して折りたたみ可能です。.selectedクラスを追加および削除すると、開いたクラスと閉じたクラスを別々にうまくスタイル設定できます 

$(".login_link,.registration_link").live("click",function(){
    $(this).parent().parent().children().children('.form_container').toggle();
    $(this).parent().parent().children().toggleClass("selected");
});

​

結果を見る：http：//jsfiddle.net/eapo/43UUP/11/embedded/result/

これを行うためのより最適なコードを作成できますか？

4

3 に答える 3

1

これは少しきれいです：

$(".login_link,.registration_link").on("click",function(){
    $(".form_container").toggle()
                        .closest("fieldset")
                        .toggleClass("selected");
});

注: jQuery 1.7 以降、.live()非推奨です。を使用し.on()ます。

これが実用的なフィドルです。

于 2012-11-25T00:35:17.667 に答える
0

プロジェクト用にその目的でスクリプトを作成したことがあります。

clickclass を使用して、フィールドセット内の各凡例に -event をバインドしていview_toggleます。

HTML:

<fieldset class="view_toggle">
    <legend>Some fieldset title to click on</legend>

    <div class="view_toggle_contents">Fieldset contents to appear after click</div>
</fieldset>

CSS:

<style>
/* view toggle for fieldsets */
.view_toggle legend {
    padding: 0 1em 0 0;
    cursor: pointer; }
.view_toggle legend:after {
    content: ' ▼'; }
.view_toggle legend.is_active_handler:after {
    content: ' ▲'; }
</style>

jQuery トグル:

<script type="text/javascript">
$(document).ready(function() {
    $('fieldset.view_toggle').each(function() {
        var handler = $(this).find('legend');
        var toggledObject = $(this).find('.view_toggle_contents');
        toggledObject.hide();
        handler.click(function() {
            $(this).toggleClass('is_active_handler');
            toggledObject.slideToggle(300);
            toggledObject.find(':input:not(:button):visible:enabled:first').focus();
        });
    });
});
</script>
于 2012-11-25T00:46:21.237 に答える
0

とにかくフィールドセットはフォーム内に属します

<form>
<fieldset class="selected">
    <legend>Bejelentkezés</legend>
    <div class="form_container">        
            [loginform]
    </div>
</fieldset>
<fieldset>
    <legend>Regisztráció</legend>
    <div class="form_container clearfix">
            [regform]  
    </div>
</fieldset>
</form>​

CSS のわずかな変更

fieldset {
    border: none;
}
.selected {
    border: 1px inset #000;
}
.form_container {
    display: none;
}    
.selected .form_container
{
    display:block;                
}
legend {
    background: #ccc;
    cursor: pointer;
}
​
    ​

jQueryを減らす

$('legend').on('click', function(){
    $(this).closest('form').find('fieldset').toggleClass('selected');
});​

実際にはどちらかをクリックすると両方が切り替わりますが

于 2012-11-25T00:58:33.830 に答える