Скрыть кнопку Bootstrap Collaspe при нажатии - PullRequest
Новая
       3

Скрыть кнопку Bootstrap Collaspe при нажатии

0 голосов
/ 16 октября 2018

Я использую этот код для создания коллапса.

HTML: 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

Как скрыть или переместить кнопку свертывания в конце нажатия?

С уважением, Ибадулла

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Лучший способ выполнить действия / модификации после завершения анимации свертывания - использовать прослушиватели для событий, которые они вызывают:

  • Событие show.bs.collapse : Это событие вызывается немедленно при вызове метода экземпляра show.

  • Событие said.bs.collapse : Это событие вызывается, когда элемент свертывания становится видимымпользователю (будет ожидать завершения переходов CSS).

  • Событие hide.bs.collapse : Это событие вызывается сразу после вызова метода hide.

  • Событие hidden.bs.collapse : это событие вызывается, когда элемент свертывания скрыт от пользователя (будет ожидать завершения переходов CSS).

Я приведу вам пример, где я играю с CSS кнопки, используя слушателей для следующих событий: показ.bs.collapse и hidden.bs.collapse . 

$(document).ready(function()
{
    $("button").css("opacity", "0.5");

    // Register a listener for collapse events.
    
    $('#demo').on('shown.bs.collapse', function()
    {
        $("button").css("opacity", "1").removeClass("btn-danger").addClass("btn-primary");
    })
    .on('hidden.bs.collapse', function()
    {
        $("button").css("opacity", "0.5").removeClass("btn-primary").addClass("btn-danger");
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

Надеюсь, это поможет вам.

0 голосов
/ 16 октября 2018

не уверен, что это лучший способ, но, вероятно, с помощью атрибута onclick может сработать. 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button id="test" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" onclick="$('#test').fadeOut();">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...