-2

我正在寻找隐藏表单中的所有元素，除了一个（图例）。

 <form class="common">
   <fieldset>
    <legend>General Info</legend>
    <div class="group">
    <label>First:
        <input type="text"/>
    </label>
    <label>Middle:
       <input type="text"/>
    </label>
    <label>Last:
        <input type="text"/>
    </label>
    <label>Age:
        <input type="text"/>
    </label>
   </fieldset>
   <fieldset>
    <legend>General Info</legend>
    <div class="group">
    <label>First:
        <input type="text"/>
    </label>
    <label>Middle:
        <input type="text"/>
    </label>
    <label>Last:
        <input type="text"/>
    </label>
    <label>Age:
        <input type="text"/>
    </label>
   </fieldset>

我希望隐藏表单中的所有内容，除了每个字段集的图例，单击时我想显示该字段集元素。

有谁知道我怎么能做到这一点？

如果你能得到这个只允许一次打开 1 个字段集，那么你会得到奖励。

谢谢，

标记

4

4 回答 4

2

首先，关闭标记上的 DIV 标签，然后这样做：

$(function() {
    // This bit could be avoided if you set display: none on your CSS
    $('.common fieldset > :not(legend)').hide();

    // One fieldset open a time, when click the legend
    $('.common fieldset > legend').on('click', function () {
        $(this).next('div').toggle();
    });
});

演示：http: //jsfiddle.net/NRd3q/

演示（CSS 更改）：http: //jsfiddle.net/NRd3q/1/

于 2013-10-01T16:17:19.433 回答
1

试试这个快速演示，应该可以完成这项工作（一次只显示一个字段集）：

function hideAll(){
    $("fieldset > :not(legend)").hide();
}

hideAll();

$("fieldset").click(function(){
    hideAll();
    $(this).children().show();
});

http://jsfiddle.net/VYwut/2/

于 2013-10-01T16:21:56.327 回答
1

尝试

$('.common fieldset > :not(legend)').hide()

演示：小提琴

于 2013-10-01T16:15:24.350 回答
0

这将隐藏withfieldset下的每个节点：divclass="common"

$('.common > fieldset > :not(legend)').hide();
于 2013-10-01T16:20:57.577 回答