Question

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

我使用bootstrap框架作为基础。我尝试按照http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h中的说明，以及我已经知道/曾经尝试添加旋转的说明。我的问题是，由于我没有使用按钮（整个博客帖子可以点击以展开和折叠它），我无法解决我需要在javascript中放置问号的问题。。（向标记添加数据目标属性会破坏帖子的可扩展性。）

＆＃13;

$(" ??? ").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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

例如，您可以将eventHandler附加到具有“blog”类的每个Element，就像我解决您的问题一样。

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附加到与选择器匹配的每个元素。

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

还可以找到非常详细的解释in this post。

将javascript转换添加到boostrap手风琴

1 个答案: