Question

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

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";
    }

当内容扩展到它们下方时，如何将扰流按钮保持在一条线上？

Answer 1

你可以让它变得更有活力，但它会让它更复杂，所以我会坚持基础。

你可以把所有的按钮放在一起，然后有扰流板部分：

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

打开扰流板部分时如何保持格式？

1 个答案: