javascript - 剧透部分打开后如何保持格式？-6ren

javascript - 剧透部分打开后如何保持格式？

转载作者：行者123 更新时间：2023-11-28 10:16:50

我最近一直在做一个元素，它使用了 js、css 和 HTML。我有一个问题，当扰流板按钮展开时，其他按钮失去了它们的位置，我该如何解决这个问题？

(问题)http://imgur.com/a/PVq1R

html代码:

<html>
    <head>
        <title> Tricks & Flips Progression </title>
        <link type="text/css" rel="stylesheet" href="C:\Users\zhewi2\Desktop\website\stylesheet.css"></link>
        <script type='text/javascript' src="C:\Users\zhewi2\Desktop\website\style.js"></script>

    </head>

<h2 id=learn>What I want to learn (progress to sand)</h2>

    <div class="learn">
    <input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
    <div1 class="inner" style="display:none;">
        <ul>
            <li>Front full</li>
            <li>Double Front</li>
            <li>Aerial Twist</li>
        </ul>
    </div1>

    <div class="learn">
    <input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
    <div2 class="inner" style="display:none;">
        <ul>
            <li>front 180</li>
            <li>Webster</li>
            <li>Loser</li>
        </ul>
    </div2>

    <div class="learn" id="learn1">
    <input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
    <div3 class="inner" style="display:none;">
        <ul>
            <li>Off-axis backtuck</li>
            <li>Back Full</li>
        </ul>
    </div3>

    <div class="learn" id="learn2">
    <input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
    <div4 class="inner" style="display:none;">
        <ul>
            <li>Tunnel flip</li>
        </ul>
    </div4>

    <div class="learn">
    <input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks" />
    <div5 class="inner" style="display:none;">
        <ul>
            <li>B-Twist</li>
            <li>Grandmaster Swipe</li>
        </ul>
    </div5>


<h2 id=progress>What I can do into sand (progress to flat)</h2>
    <div class="learning">
    <input type="button" onclick="showSpoiler6(this);" value="Backflip variations" />
    <div6 class="inner" style="display:none;">
        <ul>
            <li>Layout</li>
            <li>Swing Gainer</li>
            <li> standing ST backflip</li>
        </ul>
    </div6>

    <div class="learning">
    <input type="button" onclick="showSpoiler7(this);" value="Frontlip variations (ramp)" />
    <div7 class="inner" style="display:none;">
        <ul>
            <li>Iron man</li>
            <li>Webster</li>
            <li>Front Layout</li>
        </ul>
    </div7>

<h2 id=learnt> What I can do flat (grass and above)</h2>

    <div class="learnt">
    <input type="button" onclick="showSpoiler8(this);" value="Backflip variations" />
    <div8 class="inner" style="display:none;">
        <ul>
            <li>Backtuck</li>
        </ul>
    </div8>

</html>

CSS 代码:

#learn {
    color:red;
}
#progress {
    color:orange;
}
#learnt {
    color:green;
}
div1 {
    color:blue;
}
div2 {
    color:blue;
    position:relative;
    left: 150px;
}
div3 {
    color:blue;
    position:relative;
    left: 300px;
}
div4 {
    color:blue;
    position:relative;
    left: 450px;
}
div5 {
    color:blue;
    position:relative;
    left: 600px;
}
div6 {
    color:blue;
}
div7 {
    color:blue;
    position:relative;
    left: 120px;
}
div8 {
    color:blue;
}

.learn {
    display:inline;
}
.learning {
    display:inline;
}
.learnt {
    display inline;
}

JS代码:

function showSpoiler1(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div1")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler2(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div2")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler3(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div3")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler4(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div4")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler5(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div5")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler6(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div6")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler7(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div7")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler8(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div8")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

如何让剧透按钮保持在一条直线上，同时它们的内容在下方展开？

最佳答案

你可以让它更动态一点，但它会变得更复杂，所以我会坚持基础。

你可以把所有的按钮放在一起，然后有剧透部分:

<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks" />

<div id="div1" class="inner" style="display:none;">
    <ul>
        <li>Front full</li>
        <li>Double Front</li>
        <li>Aerial Twist</li>
    </ul>
</div>

<div id="div2" class="inner" style="display:none;">
    <ul>
        <li>front 180</li>
        <li>Webster</li>
        <li>Loser</li>
    </ul>
</div>

<div id="div3" class="inner" style="display:none;">
    <ul>
        <li>Off-axis backtuck</li>
        <li>Back Full</li>
    </ul>
</div>

<div id="div4" class="inner" style="display:none;">
    <ul>
        <li>Tunnel flip</li>
    </ul>
</div>

<div id="div5" class="inner" style="display:none;">
    <ul>
        <li>B-Twist</li>
        <li>Grandmaster Swipe</li>
    </ul>
</div>

因为是开口之间的部分造成了间隙。

请注意，我已删除您的 <div class="learn">标签，因为它们没有结束标签，所以它是无效的 html。我还为每个 <div> 添加了 ID并删除了标签的编号命名，例如 <div1>不是标准标签。因此你的 js 会变成这样:

function showSpoiler1(obj)
{
    var inner = obj.parentNode.getElementById("div1");
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
}

除了移动按钮之外，您还可以使用 CSS 将它们放在顶部。您需要将该部分包装在 <div> 中并将其设置为 position:relative; .然后您可以将按钮设置为 position:absolute;并定义距 div 包装器顶部和左侧的距离，以将它们的位置设置在顶部。但是，这需要知道它们的宽度(可能会随字体大小而变化)并且会比我认为需要的更困惑。

关于javascript - 剧透部分打开后如何保持格式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24180087/

文章推荐： Swift 错误 convertPoint(CGPoint, to : UITableView)

文章推荐： JavaScript 断点在 Visual Studio 2008 中不再起作用？

文章推荐： css - 打印 Textarea 文本 - 全长(高度)？

文章推荐： javascript - 如何在ipad上模拟点击和拖动操作？

java - 以 Clojure 格式(java.util.Formatter)、cl 格式(Common Lisp 格式)以编程方式控制填充？
有没有办法使用 Clojure format(基于 java.util.Formatter)或 cl-format(基于 Common Lisp 的format) 以编程方式设置空格填充？如果您事先知
java - 在数据库和 postman 上无法看到实际上传的文件(.pdf 格式)格式？
我正在尝试创建一个用户实体以及数据/文件(pdf格式)。上传并保存到数据库很好，但是当我让用户进入 postman 时尝试发送获取请求方法，然后在数据字段中显示一些糟糕的数据，而且我无法在数据库中看到
java - 将字符串转换为 ASCII 格式，然后再转换为 HEX 格式
我必须将值为 {"STX","ETX"} 的普通字符串数组转换为十六进制值，并且我应该根据 http://www.asciitable.com/ 得到 {2,3} . 最佳答案听起来你想要一个 Ma
flutter - dartfmt vs dart 格式 vs flutter 格式
我想格式化我的代码，但不确定哪种格式类型最适合我的项目需要。我发现仅对于 dart 和 flutter 项目(我都有)，有不止一个选项可用于格式化编程语言/框架中预先构建的代码。 Dart : da
excel - 我的 excel 文件是德国(德语)格式，想更改为英语(英国)格式
我已经尝试了多个代码，例如这样 Sub DateFixer() Application.ScreenUpdating = False Application.Calculation =
java - 当我查询 SOLR 时，我希望输出为 csv 格式，但输出仍然为 javabin 格式
SolrQuery query = new SolrQuery(); query.setQuery("*:*"); query.add("wt","csv"); server.query(query)
c++ - 将 QString 日期(RFC 822 格式)转换为另一种基于文化的 QString 格式
我有一个包含多个字符串的数据库，我从查询中获取了这些记录，并且我在 QString 中收到了这种格式的数据: "Mon, 13 Nov 2017 09:48:45 +0000" 所以，我需要根据文化来
xml - 如何在未安装 Excel 的情况下将 DBGrid 导出为 OOXML 格式(Excel 2007/2010 格式)？
我有一个 Delphi 2007 DBGrid，我想让用户以更新的 Excel 格式 (OOXML) 保存它，但我的标准是用户不需要安装 Excel。有没有人知道任何已经这样做的组件？是的，我已经搜索
ruby-on-rails - 在 rails 3.1 中更改 View 格式(提供移动 html 格式，回退到普通 html)
我正在我们的普通 html 站点旁边创建一个移动站点。使用 rails 3.1。移动站点在子域 m.site.com 中访问。我已经定义了移动格式(Mime::Type.register_alias
xmlstarlet 格式
我正在尝试使用 xmlstarlet 格式化 xml 文件，但我不想创建新的 xml 文件。我试过了 xmlstarlet fo --inplace --indent-tab --omit-decl
Excel 格式
我在 A 列中有一个带有文本的电子表格。例如 A1=MY TEXT1 A2=MY TEXT2 A3=MY TEXT3 A4=MY TEXT4 A5=MY TEXT5 我想在文本的前后添加撇号结果是
解析haskell保留注释/格式
我想做一些源代码转换(自动导入列表清理)，我想保留注释和格式。我听说过一些关于解析器这样做的事情，我认为是 ghc 解析器。看起来我可以通过从文件中提取内容来使用 hs-src-exts Langu
用于使值相等的 Excel 格式
我在 Excel 中工作，我想根据另一张表中的列表找出一张表中是否有匹配项。我已将值粘贴到列表中，并希望从另一张表中返回它们的相应值。包含字母和数字的单元格可以正常工作(例如:D5765000)，但
django - DurationField 格式
我有一个 DurationField在我的模型中定义为 day0 = models.DurationField('Duration for Monday', default=datetime.time
wmi - PNPDeviceID 格式
我正在为我的应用程序开发 WMI 查询。它需要为给定的 VID/PID 找到分配的虚拟 COM 端口。使用 WMI Code Creator 我发现...... 命名空间:root\CIMV2 类:W
swift - NSTextList 格式
我试图弄清楚如何使用 NSTextList，但除了 this SO question 之外，在网上几乎没有找到有用的信息。和 the comment in this blog . 使用这个我已经能够创
Oracle last_ddl_time 格式
我要查询all_objects表在哪里last_ddl_time='01 jan 2010'但它拒绝日期格式... 任何机构给我查询的确切格式？最佳答案正如 AKF 所说，您应该使用 Trunc除
Java JEditorPane 格式
我试图在我的应用程序中实现聊天功能。我使用了 2 个 JEditorPane。一个用于保存聊天记录，另一个用于将聊天发送到前一个 JEditorPane。 JEditorPane 是 text/h
assembly - 玩具编译器的输出语言/格式
我在大学里修了一个编译器类(class)，内容非常丰富，很有趣，尽管也很多工作。既然给了我们要实现的语言规范，所以我学不到的一件事就是语言设计。我现在正在考虑创建一种有趣的简单玩具语言，以便我可以玩耍
gradle - Gradle异常的结构/格式
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想改善这个问题吗？更新问题，以便将其作为on-topic

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 剧透部分打开后如何保持格式？