Question

我希望隐藏表单中的所有元素，除了一个（图例）。

 <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个字段集。

谢谢，

标记

Answer 1

首先，关闭标记上的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/

Answer 2

尝试

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

演示：Fiddle

Answer 3

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

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

hideAll();

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

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

Answer 4

这会隐藏fieldset下div下的每个class="common"节点：

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

是否可以隐藏指定表单中的所有DOM？

4 个答案: