slideUp在slideToggle中的fontawesome圖標

我製作了一個圖像盒，當你點擊它時，一個文本框滑落slideToggle效果。當我再次點擊該框關閉文本框時，slideToggle會起作用。但是，當文本滑落時，我在文本框中放置了一個fa-angle-up fontawesome圖標，以便訪問者可以關閉文本框，而不必再次按下圖像框。這是我的fiddle。現在我似乎無法弄清楚如何使fa-angle-up圖標工作。slideUp在slideToggle中的fontawesome圖標

如果我需要提供更多信息，我很樂意幫助當然。

我已經試過這個代碼，但什麼也沒發生：

 (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);

來源

2015-01-05 user2314339

一種解決方案是增加一個on click功能切換回原來的狀態，如：

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

fiddle

參考

parents()

來源

2015-01-05 13:51:03

這其中的伎倆:)謝謝你這麼多的快速響應，並感謝大家的努力幫助我！ – user2314339

將是明智和容易，如果你不重複urself - 只是做

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

，只要你想要的東西滑動。畢竟你已經在做切換了。

這裏是你的提琴：http://jsfiddle.net/ef5qL4t0/4/編輯

來源

2015-01-05 13:47:10

你麪包車使用：

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

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

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

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

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

 
.popup_community { 
 
\t background:white; 
 
\t max-width:226px; 
 
\t 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; 
 
\t 
 
} 
 

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

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

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

 
.popup_trigger { 
 
\t position: relative; 
 
\t  overflow: hidden; 
 
} 
 
.popup_trigger:hover { 
 
\t opacity:1; \t 
 
\t 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" /> 
 
\t <div class="col-md-3 central"> 
 
\t \t \t \t \t <div class="row" style="margin-top:20px; margin-bottom:20px;"> \t 
 
\t \t \t \t \t <div class="wrapper_community"> 
 
\t \t \t \t \t \t <a class="popup_trigger" href="#"> 
 
\t \t \t \t \t \t \t <div data-content="Click to read more" class="click_community"> 
 
           <img src="http://placehold.it/137x137" alt="test" width="226" height="226"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </a> 
 
\t 
 
\t \t \t \t \t \t <div class="popup_community" style="display:none;position:absolute; min-width:226px;"> 
 
\t \t \t \t \t \t \t <h2>Test Person</h2> 
 
\t \t \t \t \t \t \t <h3><span><i class="fa fa-map-marker"></i></span>Location</h3> 
 
\t \t \t \t \t \t \t <p class="popup_community_markup">Some text here></p> \t \t \t \t \t \t \t \t 
 
\t \t   \t \t \t <p style="padding-left:20px; text-align:left;"> 
 
\t \t   \t \t \t \t <a href="https://<?php print $mentor_twitter ;?>" target="_blank"><i class="fa fa-twitter"></i></a> 
 
\t \t   \t \t \t \t <a href="https://<?php print $mentor_fb ;?>" target="_blank"><i class="fa fa-facebook"></i></a> 
 
\t \t   \t \t \t \t <i class="fa fa-angle-up"></i> 
 
\t \t   \t \t \t </p> 
 
\t \t   \t \t \t 
 
\t \t \t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t \t \t <div class="wrapper_community_text" > 
 
\t \t \t \t \t \t \t <h2>Test Person</h2> 
 
\t \t \t \t \t \t \t <h3><span><i class="fa fa-map-marker"></i></span>Location</h3> \t 
 
\t \t \t \t \t \t </div> \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> \t 
 
\t \t \t \t </div> \t

來源

2015-01-05 13:57:20

slideUp在slideToggle中的fontawesome圖標

回答

相關問題