个人中心
gpt4 book ai didi

javascript - 如何切换自定义 HTML 元素的 View /显示？

转载 作者：行者123 更新时间：2023-11-28 04:44:53 28 4
gpt4 key购买 nike

感谢您花时间查看我的问题! :-) 我正在尝试使用自定义 HTML 元素而不是传统的“div”方法来编写更好、更干净、更易于维护的 HTML。我有一个非常简单的示例，它使用 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 标记指定特定的重复代码，我希望能够通过按钮/链接显示/隐藏这些代码。显然，我可能需要设置一些默认分配，也许可以通过以下方式关闭详细信息默认，但如果我可以避免每个“上下文”所需的额外重复代码，我希望翻转那将是惊人的!!!

任何方向的指针都可以帮助我实现我正在尝试的目标，而无需使用 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>

最佳答案

您不需要 .unhidden 类，只需要 .hidden 类。它看起来像:

.hidden{
  display:none;
}

只需使用 classList，例如 classList.toggle("hidden") 或 .add 或 .remove。

关于javascript - 如何切换自定义 HTML 元素的 View /显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43469201/

28 4 0
文章推荐： javascript - 使用 jQuery 按标签中的内容过滤标签
文章推荐： html - 如何保持缩小图像的纵横比？
文章推荐： C++:将 uint32 设置为 int32(负值)
文章推荐： javascript - ForIn 合并对象配置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com