感谢您抽出宝贵时间来回顾我的问题！ :-)我试图使用自定义HTML元素编写更好，更清晰，更易于维护的HTML，而不是传统的＆＃39; div＆＃39; div。方法。我有一个非常简单的例子，它使用div和类来将我的链接映射到我想要显示/隐藏的div，这确实有效。我将此作为我正在尝试生成的功能的一个工作示例：
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: block; }
.unhidden { visibility: visible; }
</style>
<script type="text/javascript">
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
<a href="javascript:toggle_view_div('testToggleDivID');">Do the test</a>
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML</h3>
</div>
</body>
</html>
但是，我试图提供这种功能，多个链接到多个文本集/子集，我尝试了以下但显然做了一些愚蠢的事情，因为我无法让它工作：
<html>
<head>
<script type="text/javascript">
function toggle_view_node(nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
</script>
</head>
<body>
<p>
This test shows or hides Topic 1 custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Topic1');">Topic 1</a>
<p>
This test shows or hides Topic 2 custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Topic2');">Topic 2</a>
<p>
<p>
This test shows or hides the Intro custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Intro');">Introduction</a>
<p>
This test shows or hides the Detail custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Detail');">Detail</a>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> though generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro in itself.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
请有人帮我弄清楚我做错了什么。我真的想用一些尽可能动态的CSS或JS来生成上述功能。理想情况下，我不需要指定特定的（特别是每个主题或HTML标签的重复代码，我希望能够通过按钮/链接显示/隐藏。显然，我可能需要设置一些默认分配，可能会关闭细节默认，但如果我可以避免每个＆＃34;上下文所需的额外重复代码＆＃34;我希望翻转这将是惊人的!!!
任何方向上的任何指针都可以帮助我实现我正在尝试的东西，而不必使用jQuery或JS和CSS之上的冗长库来实现我的一天！
非常感谢并且如果我做了一些非常愚蠢的事情而道歉，我还没有用自定义元素完成那么多工作，所以很可能是。
亲切的问候，
詹姆斯
**最新尝试**
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: inline; }
.unhidden { visibility: visible; }
<!-- Playing with something like this, ideally I would -->
<!-- configure the show/hide state of my custom HTML tags -->
<!-- universally in a similar way? -->
Topic1.hide { display: none; }
Topic2.hide { display: none; }
Topic3.hide { display: none; }
Intro.hide { display: none; }
Detail.hide { display: none; }
<!-- Another attempt to configure switch state but does not work either -->
Topic1 { className: unhidden; }
Topic2 { className: unhidden; }
Topic3 { className: unhidden; }
Intro { className: unhidden; }
Detail { className: unhidden; }
</style>
<script type="text/javascript">
// This works, but is not clean
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// I am now attempting to use this on 'Topic1' as per the suggestion
// in the comments of this post, for some reason it does not work, wondering if
// I need to do a .forEach to parse the set of nodeID's of the 'Topic1' in this
// example, but if working whatever HTML tag name that I want to toggle in or
// out of view
function toggle_view_node_id(nodeID) {
var item = document.getElementById(nodeID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// This does not work but I have left to show what I tried that did not work
function toggle_view_node(nodeID) {
if (nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
<a href="javascript:toggle_view_div('testToggleDivID');">Do the test that works using extra layer of div with mapped class</a>
<p>
This test shows or hides Topic 1 custom element,
(or at least attempts using the suggestion in this post
comments to try to make work without inline JS and call a
function to do it as with my working example, unfortunatly
however, this still does not seem to work :(
</p>
<a href="javascript:toggle_view_node_id('Topic1');">Topic 1</a>
<p>
This test shows or hides Topic 2 custom element,
(or at least attempts to using existing method that doesn't work
</p>
<a href="javascript:toggle_view_node('Topic2');">Topic 2</a>
<p>When I have it working I hope to be able to have: </p><a href="javascript:toggle_view_node('Topic3');">Topic 3</a>
<p>And... </p><a href="javascript:toggle_view_node('Intro');">Intro</a>
<p>And this... </p><a href="javascript:toggle_view_node('Detail');">Detail</a>
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML into view using a div and associated class of hidden, can I not do this on a custom element?</h3>
</div>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro without.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
答案 0 :(得分：0)
您不需要 """...This file is automatically generated; please don't muck it up!
To update the symbols in this file, 'cd' to the top directory of
the python source tree after building the interpreter and run:
./python Lib/keyword.py
"""
课程，只需要.unhidden课程。它看起来像：
.hidden只需使用.hidden{
display:none;
}
或classList.toggle("hidden")或.add等classList。