Btn Bootstrap 3.3.7无法显示/隐藏

问题描述 投票：0回答：2

我有按钮的问题。我可以打开内容，但是当我再次点击时，它应该关闭时没有任何变化......

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Bio-chemia</title>
</head>

.....

<div id="Biophura" class="container text-center">
  <button type="button" class="btn btn-success btn-lg" data-toggle="collapse" data-target="#demo89">BIOPHURA</button>
  <div id="demo89" 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>
jquery twitter-bootstrap button collapse
2个回答
0
投票

你错过了关闭div标签。

<div id="Biophura" class="container text-center">
  <button type="button" class="btn btn-success btn-lg" data-toggle="collapse" data-target="#demo89">BIOPHURA</button>
  <div id="demo89" 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
投票
<!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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="Biophura" class="container text-center">
<div class="container">
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo89">BIOPHURA</button>
  <div id="demo89" 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>
</div>

这是100％的工作

你的问题是在脚本链接

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.