8

我想通过单击标签时显示/隐藏其内容的选项来增强一些字段集。

目前，HTML 如下所示：

<fieldset>
    <legend>Fieldset 1</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>

因此，单击 onefieldset legend时，应切换除父字段集的单击图例之外的任何内容。

我尝试使用这个：

$("fieldset *:not(legend)").hide();
$("fieldset legend").click(function(){
    $(this).nextAll().slideToggle();
});

但它什么也没做（甚至一开始也不隐藏内容）。当然，我只想在用户单击的字段集上切换视图，因此它必须以某种方式确定单击了哪个图例，然后隐藏相应字段集的内容。

当然，我可以给他们所有的 ID 并为每个字段集编写代码，但是看到它总是相同的那是相当多余的，我认为必须有一种方法使这个功能对任何数量的字段集都通用......

有人有一个好主意吗？

4

3 回答 3

12

如果我是你，我会将字段集的内容包装在 div 中，并像这样：

<script type="text/javascript">
        $(function(){
            $('legend').click(function(){
                $(this).parent().find('.content').slideToggle("slow");
            });
        });
</script>

<fieldset>
    <legend>Fieldset 1</legend>
    <!-- Some input, p, div, whatever -->
    <div class="content">
        this<br />
        is<br />
        content<br />
    </div>
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    <!-- Some input, p, div, whatever -->
    <div class="content">
        this<br />
        is<br />
        content<br />
    </div>
</fieldset>

所以现在当你点击标签时，它会向上/向下滑动内容并让你的标签可见。

于 2009-11-26T10:53:17.807 回答
10 
$(function(){
  $('legend').click(function(){
   $(this).siblings().slideToggle("slow");
  });
});

这行得通。这实际上是相同的概念，只是相反。

于 2010-01-14T06:19:51.987 回答
3

扩大的视野

HTML（图例包含 [-] 跨度）：

<fieldset>
    <legend>My Area <span>[-]</span></legend>
    Content of fieldset...
</fieldset>

JavaScript（需要 jQuery）：

$(function(){
    // Set cursor to pointer and add click function
    $("legend").css("cursor","pointer").click(function(){
        var legend = $(this);
        var value = $(this).children("span").html();
        if(value=="[-]")
            value="[+]";
        else
            value="[-]";
       $(this).siblings().slideToggle("slow", function() { legend.children("span").html(value); } );
    });
});
于 2013-10-08T11:23:01.133 回答