1. 首頁
  2. 問答
  3. 另一部手風琴內的可摺疊手風琴

另一部手風琴內的可摺疊手風琴

2017-02-19 266 views
-1

您在自舉中知道這種效果嗎？ 當您單擊組1它切換，當你點擊第2組，第1個倒塌，這裏是例子：另一部手風琴內的可摺疊手風琴

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!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.1.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"> 
 

 
    <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="#title1">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <div class="panel-group" id="accordion"> 
 
     \t <div class="panel"> 
 
      \t <a data-toggle="collapse" href="#title1-1">sub-title</a> 
 
      </div> 
 
      
 
      <div id="title1-1" class="panel-collapse collapse in"> 
 
      \t <div class="panel-body"> 
 
       \t <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="panel"> 
 
      \t <a data-toggle="collapse" href="#title1-2">sub-title 2</a> 
 
      </div> 
 
      
 
      <div id="title1-2" class="collapse"> 
 
      \t <div class="panel-body"> 
 
       \t <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <!--- STUFF ---> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title3" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     <!--- STUFF ---> 
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

好涼，我想在「標題1內部列表「與外面的這3個列表具有相同的效果！

它不工作我想是因爲類和ID是不正確？

來源

2017-02-19 Abdulrahman Mushref

回答

1

我認爲這是你想要的。仔細觀察我將手風琴嵌入手風琴的方式。你是關於身份證和課程的。

工作實施例

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      .panel{ 
 
    border-color:#EEEEEE !important; 
 
    width: 150px; 
 
} 
 

 
.panel > .panel-heading { 
 
    background-color: greenyellow; 
 
    color: white; 
 
    height: 40px; 
 
    text-align: center; 
 
    border-color:black !important; 
 
    font-size: 20px; 
 
} 
 

 
.panel> .panel-body{ 
 
    text-align: center; 
 
    font-family: "Comic Sans MS"; 
 
    font-size: 35px; 
 
} 
 

 
.glyphicon{ 
 
    font-size: 20px !important; 
 
    text-align: left !important; 
 
} 
 
      </style> 
 
      
 
      </head> 
 
      <body> 
 
      <div class="container"> 
 

 
    <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="#title1">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <div class="panel-group" id="accordion1"> 
 
      <div class="panel"> 
 
      <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion1" href="#inside1">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="inside1" class="panel-collapse collapse in"> 
 
       <div class="panel-body"> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       
 
      </div> 
 
      </div> 
 
      </div> 
 
      
 
      <div class="panel"> 
 
       <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion1" href="#inside2">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="inside2" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <!--- STUFF --> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title3" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     <!--- STUFF --> 
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
      </body> 
 
      </html>

來源

2017-02-19 10:21:14 neophyte

相關問題

 相關問題