javascript - Bootstrap 4 崩溃在一半停止然后打开时无法顺利工作

Question

这种崩溃会停止一半，然后完全崩溃......

我一次折叠就折叠了 5 个 div，这是原因吗？因为在 W3 学校它工作得很好...我应该将折叠更改为面板...

https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

我用过这个，在这个中，它工作得很好。

$(document).ready(function() {
    $(".logo-area").click(function() {
        $(this).toggleClass("new-p");
    });
});

#collapseOne {
    width: 100%;
    padding-top: 7%;
    padding-bottom: 5%;
    z-index: 200;
    position: fixed;
    background-color: #F4F4F4;
    color: black;
    text-align: center;
}

#collapseOne div {
    display: inline-block;
    margin: 3%;
}

#collapseOne p {
    font-weight: bold;
    font-size: 36px;
    color: black;
}

#collapseOne span {
    color: black;
}

#collapseOne hr {
    width: 50%;
    background-color: black;
}

.new-p {
    color: black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="logo-area" id="fixedButton" for="collapseOne" data-toggle="collapse"
     href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <input type="image" src="images/creabaco-log2.png">
    <p class="logo-p">crebaco</p>
</div>

<div class="collapse" id="collapseOne">
    <div>
        <a href="index.html">
        <p>Crebaco.</p>
        <span>Overview.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="test.html">
        <p>Services.</p>
        <span>What we do.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="about.html">
        <p>About.</p>
        <span>Who we are.</span>
        <hr>
        </a>
    </div>

</div>

Answer 1

因为您将 padding-top: 7%; 或 padding-bottom: 5%; 赋予 #collapseOne。

这就是你效果流畅的原因。所以请删除这个CSS。

如果您尝试在内容之间留出空间，请在您的子 ID 中添加此 css，如下所示:

#collapseOne div{padding: 4% 0;}

希望这有帮助。

让我知道进一步的说明。

	$(document).ready(function() {
    $(".logo-area").click(function() {
        $(this).toggleClass("new-p");
    });
});

	#collapseOne {
    width: 100%;
    z-index: 200;
    position: fixed;
    background-color: #F4F4F4;
    color: black;
    text-align: center;
}

#collapseOne div {
    display: inline-block;
    margin: 3%;
    padding: 4% 0;
}

#collapseOne p {
    font-weight: bold;
    font-size: 36px;
    color: black;
}

#collapseOne span {
    color: black;
}

#collapseOne hr {
    width: 50%;
    background-color: black;
}

.new-p {
    color: black;
} 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="logo-area" id="fixedButton" for="collapseOne" data-toggle="collapse"
     href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <input type="image" src="images/creabaco-log2.png">
    <p class="logo-p">crebaco</p>
</div>

<div class="collapse" id="collapseOne">
    <div>
        <a href="index.html">
        <p>Crebaco.</p>
        <span>Overview.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="test.html">
        <p>Services.</p>
        <span>What we do.</span>
        <hr>
        </a>
    </div>

    <div>
        <a href="about.html">
        <p>About.</p>
        <span>Who we are.</span>
        <hr>
        </a>
    </div>

</div>