如何在第二次单击和页面刷新后隐藏div

Question

我使用bootstrap 4js折叠，它的所有工作都很好，问题是当我点击显示隐藏的div和页面重新加载后，当我再次点击它应该隐藏它的地方时，它显示隐藏的div，有什么提示吗？

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<li class="nav-item">
    <a class="nav-link dropdown-btn" data-toggle="collapse" data-target="#cl" href="#">
        <i class="material-icons" style="color : black;">content_paste</i>
        <p>Client Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="cl">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'client'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client Contact List</p>
        </a>
    </li>
</div>
<li class="nav-item">
    <a class="nav-link" data-toggle="collapse" data-target="#fournis" href="#">
        <i class="material-icons" style="color : black">content_paste</i>

        <p>Fournis Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="fournis">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'fournis'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'Fournis_contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis Contact List</p>
        </a>
    </li>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

​

Answer 1

使用可折叠div中的show类

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<li class="nav-item">
    <a class="nav-link dropdown-btn" data-toggle="collapse" data-target="#cl" href="#">
        <i class="material-icons" style="color : black;">content_paste</i>
        <p>Client Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="cl" class="show">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'client'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>

            <p>Client Contact List</p>
        </a>
    </li>
</div>
<li class="nav-item">
    <a class="nav-link" data-toggle="collapse" data-target="#fournis" href="#">
        <i class="material-icons" style="color : black">content_paste</i>

        <p>Fournis Section <span class="iconify" data-icon="zmdi-caret-down-circle" data-inline="false"></span></p>
    </a>
</li>
<div id="fournis" class="show">
    <li class="nav-item">
        <a class="nav-link" href="{% url 'fournis'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis List</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'Fournis_contact'%}">
            <i class="material-icons" style="color : white;">content_paste</i>
            <p>Fournis Contact List</p>
        </a>
    </li>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

​