Question

在单独的字段集中有一个登录和注册表单，如下所示：

<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>

一个打开另一个默认情况下用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/

你能做出更优化的代码吗？

Answer 1

这有点清洁：

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

注意：从jQuery 1.7开始，.live()已被弃用。使用.on()。

这是a working fiddle。

Answer 2

我为项目构建了一个脚本一次。

我将click - 事件绑定到带有类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>

Answer 3

无论如何，Fieldsets都属于表单

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

虽然实际上点击要么切换

使用jQuery </fieldset>的样式可折叠<fieldset>

3 个答案: