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上模拟点击和拖动操作？

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

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