jquery – 当图例元素点击时,将会将其缩小

我有一个jQuery函数,当它的图例被点击时切换字段集的内容的可见性,只留下字段集边框(如果有的话),而图例显示：

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

除非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>

为了切换文本节点,我也尝试过：

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

它与第一个功能相同.和这个：

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

这会抛出错误

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

关于如何获取字段集(减去图例)的全部内容以在点击图例时切换的任何想法？

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(); 
});

解决方法

你根本无法使文本在HTML,JavaScript或CSS中消失.它需要包含在HTML元素中,该元素将显示：none;应用或类似的东西.

以下代码将所有内容都包装成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();
  }
});

>代码：http://jsbin.com/eleva3/edit
>预览：http://jsbin.com/eleva3