Question

有人可以帮我修复小虫子吗？我使用bootstrap 4 alpha 6.下面你可以看到图片。如你所见，我的页面中有几个折叠块。其中一个崩溃块在其他崩溃块内。当我单击按钮打开该内部块（使用内部数据切换）时，它会更改顶部数据切换的图标。我在JS中做错了什么？

HTML：

<div class="card">
   <div class="card-header">
      <div class="d-flex align-items-center justify-content-between">
          <button data-toggle="collapse" data-target="#collapse-group-task" aria-expanded="false" aria-controls="collapse-group-task">
              <i class="fa fa-eye" aria-hidden="true"></i>
          </button>
      </div>
   </div>

   <div class="card-block">
      <div class="collapse" id="collapse-group-task">
         <div class="list-group">
            <div class="d-flex w-100 justify-content-end custom-d-flex">
               <a data-toggle="collapse" href="#collapse-group-task-1" aria-expanded="false" aria-controls="collapse-group-task-1">
                  <i class="fa fa-comments-o" aria-hidden="true"></i>&#9;<span>Comments</span>
               </a>
            </div>

            <div class="collapse w-100 comment-list-block" id="collapse-group-task-1">
                  ***SOME TEXT***
            </div>
         </div>
      </div>
   </div>

</div>
</div>

JS：

$(document).ready(function () {
    $('.collapse')
        .on('shown.bs.collapse', function() {
            $(this)
                .parent().parent()
                .find(".fa-eye")
                .removeClass("fa-eye")
                .addClass("fa-eye-slash");
        })
        .on('hidden.bs.collapse', function() {
            $(this)
                .parent().parent()
                .find(".fa-eye-slash")
                .removeClass("fa-eye-slash")
                .addClass("fa-eye");
        });
});

Answer 1

这是因为手风琴里面有手风琴，它们都有相同的类崩溃，同样event。解决方案是使用parent element停止stopPropagation()的事件。

我在这里做了一个小提琴：fiddle link。

希望这有帮助！

Answer 2

您当前的jQuery将在页面上收听所有崩溃事件，当您在手风琴中添加手风琴时，它们都有相同的事件。你可以使用另一个答案中提到的stopPropagation()，或者你可以检查event.target，或者你可以为你的父级手风琴添加一个独特的类，并使用该类添加事件监听器，所有这些都将解决你的问题。 / p>

这是一个解决方案，使用event.target仅在打开或关闭父手风琴时进行更改。

＆＃13;

$(document).ready(function () {
    $('.collapse')
        .on('shown.bs.collapse', function(e) {
		if(e.target.id !== 'collapse-group-task'){return}
            $(this)
                .parent().parent()
                .find(".fa-eye")
                .removeClass("fa-eye")
                .addClass("fa-eye-slash");
        })
        .on('hidden.bs.collapse', function(e) {
		if(e.target.id !== 'collapse-group-task'){return}
            $(this)
                .parent().parent()
                .find(".fa-eye-slash")
                .removeClass("fa-eye-slash")
                .addClass("fa-eye");
        });
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">	
</head>
<body>

<section class="container">
	<section class="row">
<div class="card">
   <div class="card-header">
      <div class="d-flex align-items-center justify-content-between">
          <button data-toggle="collapse" data-target="#collapse-group-task" aria-expanded="false" aria-controls="collapse-group-task">
              <i class="fa fa-eye" aria-hidden="true"></i>
          </button>
      </div>
   </div>

   <div class="card-block">
      <div class="collapse" id="collapse-group-task">
         <div class="list-group">
            <div class="d-flex w-100 justify-content-end custom-d-flex">
               <a data-toggle="collapse" href="#collapse-group-task-1" aria-expanded="false" aria-controls="collapse-group-task-1">
                  <i class="fa fa-comments-o" aria-hidden="true"></i>&#9;<span>Comments</span>
               </a>
            </div>

            <div class="collapse w-100 comment-list-block" id="collapse-group-task-1">
                  ***SOME TEXT***
            </div>
         </div>
      </div>
   </div>

</div>		
	</section>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>		
</body>
</html>

＆＃13;

以上代码段https://jsbin.com/libege/edit?html,js,output

的Jsbin

Bootstrap折叠更改图标

2 个答案: