Bootstrap Collapse không hoạt động

Tôi đang cố tạo một thành phần có thể thu gọn bằng Bootstrap. Mã của tôi là số nàyBootstrap Collapse không hoạt động

<html> 
<head> 

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 


</head> 
<body> 

<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
    <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
     Collapsible Group Item #1 
    </a> 
    </h4> 
</div> 
<div id="collapseOne" class="panel-collapse collapse in"> 
    <div class="panel-body"> 
    Anim pariatur cliche reprehenderit 
    </div> 
</div> 
</div> 
</div> 

</body> 
</html>

"Mục nhóm có thể thu gọn # 1" khi nhấp vào sẽ thu gọn các mục trong lớp "thân bảng" nhưng không có tác dụng nhấp chuột. Tôi đã sao chép mã này trực tiếp từ tài liệu Bootstrap nhưng nó không hoạt động. Bất cứ ai có thể tìm ra vấn đề là gì?

Nguồn

2014-04-09 poshanniraula

jQuery là cần thiết ;-)

DEMO

<html> 
<head> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <!-- THIS LINE --> 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
        Collapsible Group Item #1 
       </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       Anim pariatur cliche reprehenderit 
      </div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

Nguồn

2014-04-09 07:46:24 MaiKaY

Bất kỳ ý tưởng nào tại sao chức năng này sẽ không hoạt động với https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js? – cbarg

bootstrap.js được sử dụng thư viện jquery vì vậy bạn cần phải thêm thư viện jquery trước js bootstrap.

vì vậy vui lòng thêm thư viện jquery như

Lưu ý: Vui lòng duy trì thứ tự tệp js. html sử dụng trang hàng đầu để tiếp cận từ dưới cho biên soạn

<head> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</head>

Nguồn

2014-04-09 07:51:48

Bạn cần jQuery thấy bootstrap của basic template

Nguồn

2014-04-09 07:53:02 Ashkan

Thêm jQuery và chắc chắn rằng chỉ có một liên kết cho jQuery nguyên nhân nhiều hơn một không hoạt động ...

Nguồn

2014-04-09 07:55:54 Terabyte

-1

Có lẽ cổng xem trên thiết bị di động của bạn chưa được đặt. Thêm thẻ meta sau vào bên trong <head></head> để cho phép menu hoạt động trên điện thoại di động.

<meta name=viewport content="width=device-width, initial-scale=1">

Nguồn

2016-07-26 03:57:18

Bootstrap Collapse không hoạt động

Trả lời

Các vấn đề liên quan