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

一种解决方案是添加on click函数以切换回以前的状态，如：

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

fiddle

<强>参考

parents()

Answer 2

如果你不重复自己，那么

会更加明智和轻松 - 只需要做

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

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

这是你的小提琴：编辑http://jsfiddle.net/ef5qL4t0/4/

Answer 3

你可以使用：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

slideUp在slideToggle中的fontawesome图标上

3 个答案: