單擊圖例元素時折疊字段集

[英]collapse fieldset when legend element clicked


I have a jQuery function which toggles the visibility of the contents of a fieldset when its legend is clicked, leaving just the fieldset border (if there is one) and the legend showing:

我有一個jQuery函數,當點擊它的圖例時,它會切換字段集內容的可見性,只留下字段集邊框(如果有的話)和圖例顯示:

$('legend.togvis').click(function() {
    $(this).siblings().toggle();
    return false;
});

It works great unless the fieldset contains text nodes.

除非fieldset包含文本節點,否則它很有用。

<fieldset><legend class='togvis'>Click Me</legend>
  <p>I toggle when the legend is clicked.</p>
  But I'm a recalcitrant text node and refuse to toggle.
</fieldset>

In an effort to toggle the text nodes too I tried this:

為了切換文本節點,我嘗試了這個:

$('legend.togvis').click(function() {
    $(this).parent().contents().not('legend').toggle();
    return false;
});

which works the same as the first function. And this:

其作用與第一個函數相同。還有這個:

$('legend.togvis').click(function() {
    $(this).parent().contents(":not(legend)").toggle();
    return false;
});

which throws the error

這引發了錯誤

Message: 'style.display' is null or not an object
Line: 5557
Char: 3
Code: 0
URI: http://code.jquery.com/jquery-1.4.4.js

Any thoughts on how to get the entire contents of a fieldset (minus the legend) to toggle when the legend is clicked?

有關如何獲取字段集的全部內容(減去圖例)以在單擊圖例時切換的任何想法?

ETA Solution, with many thanks to Eibx

ETA解決方案,非常感謝Eibx

$('legend.togvis').click(function() { 
    $(this).parent().contents().filter(
        function() {  return this.nodeType == 3; }).wrap('<span></span>');//wrap any stray text nodes
    $(this).siblings().toggle(); 
}); 

5 个解决方案

#1


14  

You simply cannot make text disappear in HTML, JavaScript or CSS. It needs to be contained in a HTML element that will have display:none; applied or something similar.

你根本無法使文本在HTML,JavaScript或CSS中消失。它需要包含在一個HTML元素中,該元素將具有display:none;應用或類似的東西。

The following code will wrap everything into a div, and move your legend to the same level as the div, and make the div show/hide when you click on the legend.

以下代碼將所有內容包裝到div中,並將您的圖例移動到與div相同的級別,並在單擊圖例時使div顯示/隱藏。

$("fieldset legend").click(function() {
  if ($(this).parent().children().length == 2)
    $(this).parent().find("div").toggle();
  else
  {
    $(this).parent().wrapInner("<div>");
    $(this).appendTo($(this).parent().parent());
    $(this).parent().find("div").toggle();
  }
});

#2


11  

Since text nodes are not elements, there is no way to toggle them.

由於文本節點不是元素,因此無法切換它們。

As a last resort, if you cannot wrap them with an element, you can remove everything except the legend and add the elements and the text nodes back later:

作為最后的手段,如果你不能用元素包裝它們,你可以刪除除圖例之外的所有內容,並在以后添加元素和文本節點:

$(document).ready(function() {
    $('legend.togvis').click(function() {
        var $this = $(this);
        var parent = $this.parent();
        var contents = parent.contents().not(this);
        if (contents.length > 0) {
            $this.data("contents", contents.remove());
        } else {
            $this.data("contents").appendTo(parent);
        }
        return false;
    });
});

You can test that solution here.

您可以在此處測試該解決方案。

#3


5  

Use a div tag to separate the contents, something like:

使用div標簽分隔內容,例如:

<fieldset>
  <legend class='togvis'>Click Me</legend>
  <div class="contents">
  <p>I toggle when the legend is clicked.</p>
  But I'm a recalcitrant text node and refuse to toggle.
  </div>
</fieldset>

Then you only need to toggle the div.

然后你只需要切換div。

$('legend.togvis').click(function() {
    $(this).closest("contents").toggle();
    return false;
});

Update only in case you cannot edit the HTML you can do the following but it will only work if all texts are within at least one tag:

僅在您無法編輯HTML時才更新,您可以執行以下操作,但只有在所有文本都在至少一個標記內時才會更新:

$('legend.togvis').click(function() {
    $(this).parents("fieldset").find("*:not('legend')").toggle();
    return false;
});

Online demo here: http://jsfiddle.net/yv6zB/1/

在線演示:http://jsfiddle.net/yv6zB/1/

#4


0  

May be you simply enclose your text into the sibilig tag:

可能只是將您的文本包含在sibilig標記中:

<fieldset><legend class='togvis'>Click Me</legend>
  <div><p>I toggle when the legend is clicked.</p>
  But I'm a recalcitrant text node and refuse to toggle.</div>
</fieldset>

#5


0  

I liked the accepted answer, but did not find it robust enough for my purposes. Just checking the length of the number of child elements does not support many scenarios. As such, I would consider using an implementation similar to:

我喜歡接受的答案,但沒有找到足夠強大的我的目的。只檢查子元素數量的長度並不支持很多場景。因此,我會考慮使用類似於以下的實現:

$("fieldset legend").click(function () {
    var fieldset = $(this).parent();
    var isWrappedInDiv = $(fieldset.children()[0]).is('div');

    if (isWrappedInDiv) {
        fieldset.find("div").slideToggle();
    } else {
        fieldset.wrapInner("<div>");
        $(this).appendTo($(this).parent().parent());
        fieldset.find("div").slideToggle();
    }
});

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/01/11/725d56a7428c6d4587af125661d944dc.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com