パネルが折りたたまれているときにのみボタンを表示する方法

Question

パネルが折りたたまれているときだけボタンを表示する方法がありますか？私は蛇のコードを試みたが成功しなかった。私もgetElementById（ "＃closeButton"）。style.visibilityを使用しようとしましたが、まだ動作していません。

function checkCollapsed(){ 
 
    
 
if($("#panel").hasClass('ui-collapsible-collapsed')){ 
 
    $("#closeButton").hide(); 
 
}else{ 
 
    $("#closeButton").show(); 
 
} 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div class="panel-group col-lg-1"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a> 
 
     <button id="closeButton" type="button" class="close" aria-label="Close" > 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </h4> 
 
    </div> 
 
    <div id="panel" class="panel-collapse collapse"> 
 
     blablabla 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

.in#panel要素にクラスが追加されています。 ui-collapsible-collapsedは常にそこに残っています。

function checkCollapsed() { 
 
    if ($("#panel").hasClass('in')) { 
 
    $("#closeButton").hide(); 
 
    } else { 
 
    $("#closeButton").show(); 
 
    } 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div class="panel-group col-lg-1"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a> 
 
     <button id="closeButton" type="button" class="close" aria-label="Close" > 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </h4> 
 
    </div> 
 
    <div id="panel" class="panel-collapse collapse"> 
 
     blablabla 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私はあなたのクリックは、変更前のクラスであるときに問題があることをsupose。

function checkCollapsed(){ 
    setTimeout(function(){ 
if($("#panel").hasClass('ui-collapsible-collapsed')){ 
    $("#closeButton").hide(); 
}else{ 
    $("#closeButton").show(); 
} 
}, 110); 

} 

アイデアは、ステータス、およびクラスを変更するには、パネルをcollapsideに時間がかかるです： ひとつのアイデアは、少しタイムアウトを作ることです。 助けを期待する