将 javascript 转换添加到引导手风琴

Question

我有一个手风琴来隐藏网页中的博客文章。我有一个向下箭头，当博客文章（手风琴部分）打开时，我想将其旋转为向上箭头。这些显然应该独立于附加到其他帖子的其他箭头。

我使用引导框架作为基础。我尝试按照此处的说明进行操作 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h ，以及我已经知道/曾经尝试添加旋转的内容。我的问题是，由于我没有使用按钮（整个博客文章都可以单击以展开和折叠它），我无法弄清楚我需要在问号所在的 javascript 中放入什么。 （向标签添加 data-target 属性会破坏帖子的可扩展性）。

$(" ??? ").on("hide.bs.collapse", function(){
    $('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
    $('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});

expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a class="blog" data-toggle="collapse" data-parent="#accordion"
   href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
   <div class="panel">
     <div class="panel-heading" role="tab" id="headingOne">
       <h4 class="panel-title">
         <div class="row">
           <div class="container col-md-12 heading-container">
             <div class="col-md-1 col-sm-2 text-center">
               <h3 class="date-text">Jun 25th</h3>
             </div>
             <div class="col-md-11 col-sm-10">
               <h3>This is where the post title goes</h3>
             </div>
           </div>
         </div>
       </h4>
     </div>
     <div class="panel-teaser panel-body" >
       <div class="row">
         <div class="col-md-1">
         </div>
         <div class="container col-md-11">
           This is where the description goes
           This should be the blog post's first paragraph (which needs to be catchy, no images here though)
          </div>
        </div>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" 
                 role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-1">
            </div>
            <div class="container col-md-11">
              This is where the main text body goes.
              This should be the rest of the blog post, images and all)
             </div>
           </div>
         </div>
       </div>
       <span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
       <hr>
     </div>
   </a>

   <a class="blog collapsed" data-toggle="collapse" data-parent="#accordion" 
      href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
     <div class="panel">
       <div class="panel-heading" role="tab" id="headingTwo">
         <h4 class="panel-title">
           <div class="row">
             <div class="container col-md-12 heading-container">
               <div class="col-md-1 col-sm-2 text-center">
                 <h3 class="date-text">Jun 26th</h3>
               </div>
               <div class="col-md-11 col-sm-10">
                 <h3>This is where the post title goes</h3>
               </div>
             </div>
           </div>
         </h4>
       </div>
       <div class="panel-teaser panel-body">
         <div class="row">
           <div class="col-md-1">
           </div>
           <div class="container col-md-11">
             This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
           </div>
         </div>
       </div>
       <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
         <div class="panel-body">
           <div class="row">
             <div class="col-md-1">
             </div>
             <div class="container col-md-11">
               This is where the main text body goes.
               This should be the rest of the blog post, images and all)
             </div>
           </div>
         </div>
       </div>
       <span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
       <hr>
     </div>
   </a>
 </div>

Answer 1

您可以将 eventHandler 附加到任何元素上，即.collapse 的父元素之一。这是因为事件是在.collapse 元素上触发的，并且一直向上冒泡。您可以阅读有关事件冒泡的更多信息here。

例如，您可以将 eventHandler 附加到每个具有“博客”类的元素上，就像我为解决您的问题所做的那样。

Relevant jsFiddle

$(".blog").each(function () {
    $(this).on("hide.bs.collapse", function () {
        $(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
    });
    $(this).on("show.bs.collapse", function () {
        $(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
    });
});

注意开头的.each。这会将不同的 eventHandler 附加到与选择器匹配的每个 Element。

现在您可以在此元素中搜索要旋转的图标 --> $(this).find( 这只会在单击的博客元素内找到一个箭头。

很详细的解释也可以找到in this post。