我有一个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();
});
はると*_*はると 15
你根本无法使文本在HTML,JavaScript或CSS中消失.它需要包含在已display:none;应用或类似的HTML元素中.
以下代码将所有内容包装到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();
}
});
Fré*_*idi 11
由于文本节点不是元素,因此无法切换它们.
作为最后的手段,如果你不能用元素包装它们,你可以删除除图例之外的所有内容,并在以后添加元素和文本节点:
$(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;
});
});
您可以在此处测试该解决方案.
ock*_*888 11
现在在 2019 年，这可以纯粹使用 HTML 和 CSS 来完成。
\n\n#toggle + #content {\r\n display: none;\r\n}\r\n\r\n#toggle:checked + #content {\r\n display:block;\r\n}\r\n\r\nlegend {\r\n width: 85%;\r\n border: 1px solid black;\r\n padding: 3px 6px;\r\n cursor: pointer;\r\n}\r\n\r\nlegend label {\r\n width: 100%;\r\n display: inline-block;\r\n cursor: inherit;\r\n}\r\n\r\nlegend label::after {\r\n content: "\xe2\x96\xbc";\r\n float: right;\r\n}<body>\r\n<form>\r\n<fieldset>\r\n <legend><label for="toggle">Test</label></legend>\r\n <!-- This input has no name, so it\'s not submitted with the form -->\r\n <input type="checkbox" id="toggle" checked="" hidden=""/>\r\n <div id="content">\r\n <label>Some text field<input type="text" name="some-text-field"/></label><br/>\r\n <label>Some color input<input type="color" name="some-color-field"/></label>\r\n </div>\r\n</fieldset>\r\n</form>\r\n</body>虽然纯 HTML/CSS 解决方案显然很出色，但使用 Javascript 在页面上进行交互编程并没有什么问题。但我注意到所有其他答案都使用 JQuery，这在 2019 年是完全没有必要的。
\n\nwindow.addEventListener(\'load\', () => {\r\n const collapser = document.getElementById(\'collapser\');\r\n const collapsable = document.getElementById(\'collapsable\');\r\n\r\n function collapse(event) {\r\n if (event) {\r\n event.stopPropagation();\r\n }\r\n\r\n collapsable.hidden = !collapsable.hidden;\r\n }\r\n\r\n collapser.addEventListener(\'click\', collapse);\r\n});legend {\r\n width: 85%;\r\n border: 1px solid black;\r\n padding: 3px 6px;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n\r\nlegend::after {\r\n content: "\xe2\x96\xbc";\r\n float: right;\r\n}<body>\r\n<form>\r\n<fieldset>\r\n <legend id="collapser">Test</legend>\r\n <div id="collapsable">\r\n <label>Some text field<input type="text" name="some-text-field"/></label><br/>\r\n <label>Some color input<input type="color" name="some-color-field"/></label>\r\n </div>\r\n</fieldset>\r\n</form>\r\n</body>使用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>
然后你只需要切换div.
$('legend.togvis').click(function() {
$(this).closest("contents").toggle();
return false;
});
仅在您无法编辑HTML时才更新,您可以执行以下操作,但仅当所有文本都在至少一个标记内时才会起作用:
$('legend.togvis').click(function() {
$(this).parents("fieldset").find("*:not('legend')").toggle();
return false;
});
在线演示: http ://jsfiddle.net/yv6zB/1/
| 归档时间： |
|
| 查看次数： |
28015 次 |
| 最近记录： |