当扰流部分打开时，如何保持格式

How can keep format when spoiler sections are opened?

本文关键字：何保持 格式 流部      更新时间：2023-09-26

我最近一直在做一个使用js, css和HTML的项目。我有一个问题，当扰流按钮扩大，其他按钮失去了他们的位置，我该如何解决这个问题?

(问题)https://i.stack.imgur.com/bp5u6.jpg

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包装器顶部和左侧的距离，以设置它们在顶部的位置。然而，这需要知道它们的宽度(它可以随着字体大小而改变)，并且会比我认为需要的更混乱。

相关文章：