slideUp on fontawesome icon в slideToggle

У меня есть изображение, которое, когда вы нажимаете на него, текстовое поле скользит вниз с эффектом slideToggle. Когда я снова нажимаю на поле, чтобы закрыть текстовое поле, работает slideToggle. Но когда текст соскользнул вниз, я помещаю в текстовое поле значок фа-угол вверх, чтобы посетители могли закрыть текстовое поле, вместо того, чтобы снова нажать на изображение. Вот мой fiddle. Теперь я не могу понять, как сделать значок fa-angle-up.slideUp on fontawesome icon в slideToggle

Если мне нужно предоставить больше информации, я рад помочь.

я попробовал этот код, но ничего не происходит:

 (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

You ван Использование:

$('.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 on fontawesome icon в slideToggle

ответ

Смежные вопросы