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

我认为问题出在你的点击之前，是在改变课程之前。一个想法是暂停一下：

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

}

这个想法是花点时间让专家小组改变状态和上课。期待它的帮助

如何仅在折叠面板时设置按钮可见

2 个答案: