时间戳

首页 > 解决方案 > 单击内容中的链接时，Twitter Bootstrap 手风琴崩溃

javascript - 单击内容中的链接时，Twitter Bootstrap 手风琴崩溃

问题描述

我从引导程序中使用手风琴折叠，我有以下代码。每当我单击按钮并出现表格时，我单击作为 html 锚点的“视图”，表格就会折叠回来。我想保持表格向下并仅在单击“查看”链接时阻止它折叠。

我已经尝试过 javascriptstopPropagation()方法并且它有效，但它适用于每个锚标记，这意味着我什至无法打开手风琴面板。我曾经用 html 来调用它onclick=""。

    (function($) {
  "use strict";

$(document).ready(function() {
    $(".collapse").collapse('hide');
    $("#accordion a").click(function() {
            $(".collapse").collapse('hide');  
    });
});
})(jQuery);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="http://mardav.ga/styles.css">
</head>
    <body id="page-top">
        <div id="content">
        <section class="page-section bg-dark text-white">
            <div class="container text-center">
        </div>
<div data-toggle="true" class="panel-group d-flex align-content-start flex-wrap" id="accordion">
<div class="col-sm-4">
  <div class="panel panel-default">
    <div class="panel-heading d-flex justify-content-center">
  <h4 class="panel-title">
    <a class="btn btn-outline-light btn-sm" data-toggle="collapse" data-parent="#accordion" href="#content2020">
      2020
    </a>
  </h4>
</div>
  </div>

</div>
<div class="col-sm-6">  
<div class="panel panel-default">
    <div id="content2020" class="panel-collapse collapse">
      <div class="panel-body">
          <table class="table table-sm table-dark table-bordered">
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Content 1</td>
              <td class="table-action"><a href="http://www.google.com" target="_blank">View</a></td>
            </tr>
            </tbody>
            </table>
      </div>
    </div> 
    </div>  
</div>
</div>
</body>
</html>

标签： javascripthtmltwitter-bootstrap

解决方案

推荐阅读