0

在单独的 fieldset-s 中有一个登录和注册表单，如下所示： 

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

你可以制作更优化的代码来做到这一点吗？

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

我曾经为此目的为一个项目构建了一个脚本。

我将click-event 绑定到带有 class 的字段集中的每个图例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 回答