slideUp 在 slideToggle 中的 fontawesome 图标上

Question

我做了一个图片框，当你点击它时，一个文本框会随着 slideToggle 效果向下滑动。当我再次单击该框以关闭文本框时，slideToggle 起作用。但是当文本向下滑动时，我在文本框中放置了一个 fa-angle-up fontawesome 图标，这样访问者就可以关闭文本框，而不必再次按下图像框。这是我的 fiddle。现在我似乎无法弄清楚如何使 fa-angle-up 图标工作。

如果我需要提供更多信息，我当然很乐意提供帮助。

我试过这段代码，但没有任何反应：

     (function($) { 
  $('.popup_trigger').on('click', function(e, ui) {
    $('.popup_community', $(this).parent('.wrapper_community')).slideToggle('slow');    
    e.preventDefault(); 
  });   
  $('.fa-angle-up').on('click', function(e, ui) {
    $('.popup_community', $(this).parent('.wrapper_community')).slideUp('slow');    
    e.preventDefault(); 
  });   

})(jQuery);

Answer 1

如果你不重复自己的话会更明智和容易 - 就这样做

$('.popup_trigger').trigger('click')

只要你想让东西滑动。毕竟你已经在那里做了一个切换。

这是您的 fiddle：http://jsfiddle.net/ef5qL4t0/4/ 已编辑

Answer 2

一个解决方案是添加一个 on click 函数来切换回之前的状态，例如：

$("i.fa").on("click", function () {
    $(this).parents(".popup_community").slideToggle('slow');
});

fiddle

参考资料

parents()

Answer 3

您使用：

$('.popup_trigger').on('click', function(e, ui) {
  $('.popup_community', $(this).parent('.wrapper_community')).slideToggle('slow'); 
  e.preventDefault(); 
 }); 
 $('.fa').on('click', function(e, ui) {
  $('.popup_community').slideToggle('slow'); 
  e.preventDefault(); 
 });

.wrapper_community_text h2, .popup_community h2 {
   font-weight:bold;
   font-size:24px;
   padding:15px 0 5px;
   margin:0;
   
   
  }
  
 .wrapper_community_text h3, .popup_community h3 {
  font-size:10px;
  letter-spacing:0.2em;
  margin:0;
  } 
  
  
  .wrapper_community_text h3.memberTitle, .popup_community h3.memberTitle  {
  font-size:18px;
  letter-spacing:0; 
  }
  
  .wrapper_community_text .fa-map-marker, .popup_community .fa-map-marker {
   color:#808184;
   padding:0 5px 0 0px;
   font-size: 1.6em;
  } 
  
  .wrapper_community a:hover  {

   
  }
  
  .wrapper_community_text a, .popup_community a{
   color:#B9150B;
   
  }
  
    .wrapper_community_text a:hover, .popup_community a:hover {
   color:#404040;
   text-decoration:none;
   
  }

  .wrapper_community_text p, .popup_community p{
   font-size:13px;
   
  }

.wrapper_community {
 max-width:226px;
 margin:0 auto;
 
}

.popup_community {
 background:white;
 max-width:226px;
 webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
position:absolute;
z-index:1;
 
}

.popup_community .fa-angle-up{
 float:right;
 padding-right:15px;
}

.popup_community .fa-twitter, .popup_community .fa-facebook, .popup_community .fa-angle-up {
 color:#808184;
 font-size:22px;
}

.popup_community .fa-twitter:hover, .popup_community .fa-facebook:hover, .popup_community .fa-angle-up:hover {
 color:#B9150B;
} 
 
.popup_community_markup  {
 padding:20px;
}

.popup_trigger {
  position: relative;
     overflow: hidden;
}
.popup_trigger:hover {
 opacity:1; 
 background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
 <div class="col-md-3 central">
     <div class="row" style="margin-top:20px; margin-bottom:20px;"> 
     <div class="wrapper_community">
      <a class="popup_trigger" href="#">
       <div data-content="Click to read more" class="click_community">
                                <img src="http://placehold.it/137x137" alt="test" width="226" height="226">
       </div>
      </a>
 
       <div class="popup_community" style="display:none;position:absolute; min-width:226px;">
        <h2>Test Person</h2>
        <h3><span><i class="fa fa-map-marker"></i></span>Location</h3>
        <p class="popup_community_markup">Some text here></p>         
              <p style="padding-left:20px; text-align:left;">
               <a href="https://<?php print $mentor_twitter ;?>" target="_blank"><i class="fa fa-twitter"></i></a>
               <a href="https://<?php print $mentor_fb ;?>" target="_blank"><i class="fa fa-facebook"></i></a>
               <i class="fa fa-angle-up"></i>
              </p>
              
       </div>    
       <div class="wrapper_community_text" >
        <h2>Test Person</h2>
        <h3><span><i class="fa fa-map-marker"></i></span>Location</h3> 
       </div>     
     </div>
    </div> 
    </div>

slideUp 在 slideToggle 中的 fontawesome 图标上

slideUp on fontawesome icon in slideToggle

html

javascript

css

jquery