Question

我正在使用此代码创建折叠。

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>

如何在点击结束时隐藏或移动折叠按钮？

关于，伊巴杜拉

Answer 1

不确定这是否是最好的方法，但可能使用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>

Answer 2

完成折叠动画后进行动作/修改的最好方法是在侦听器触发的事件上使用侦听器：

事件 show.bs.collapse ：调用show实例方法时，将立即触发此事件。
事件 shown.bs.collapse ：当使折叠元素对用户可见时将触发此事件（将等待CSS转换完成）。
< / li>
事件 hide.bs.collapse ：调用hide方法后立即触发此事件。
事件 hidden.bs.collapse ：当向用户隐藏了折叠元素（将等待CSS转换完成）时，会触发此事件。

我为您提供示例，并举例说明在以下事件中使用侦听器使用按钮的CSS的情况： shown.bs.collapse 和 hidden.bs.collapse 。< / p>

$(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>

希望这对您有所帮助。

单击时隐藏Bootstrap collaspe按钮

2 个答案: