我有一个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