Как скрыть div после второго клика и обновления страницы - PullRequest
Новая
       2

Как скрыть div после второго клика и обновления страницы

0 голосов
/ 18 апреля 2020

Я использую bootstrap 4 js свернуть, все работает нормально, проблема в том, что когда я нажимаю, чтобы показать скрытый 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>

1 Ответ

2 голосов
/ 19 апреля 2020

Используйте класс show, в разборном 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" 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>
...