如果div可见，则切换图标

Question

如果fa-chevron-down div可见，如何在链接上将图标类从fa-chevron-up切换到toggle-project-stages？

jsFiddle

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function(e){
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);

    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
});

Answer 1

您可以使用toggleClass()

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function (e) {
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);


    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
    var $i = $('i', this).toggleClass('fa-chevron-down fa-chevron-up')
    $('.toggle-project-status-downArrow i').not($i).removeClass('fa-chevron-up').addClass('fa-chevron-down')
});

演示：Fiddle

Answer 2

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function(e){
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);
    if( $(this).children().hasClass( "fa-chevron-down" )){
        $(this).children().removeClass('fa-chevron-down').addClass('fa-chevron-up');    
    }
    else{
        $(this).children().removeClass('fa-chevron-up').addClass('fa-chevron-down');    
        
    }
    
   
    
    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

<br/><br/>

<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

Answer 3

在toggle()的回调中，您可以使用toggleClass删除chevron-down和chevron-up。试试这个：

$(".toggle-project-status-downArrow").click(function (e) {
    e.preventDefault();
    var $el = $(this);
    var toggleDiv = $el.closest('div').prev('.panel-heading').find(".toggle-project-stages").stop(true).toggle(200, function() {
        $el.find('i').toggleClass('fa-chevron-down fa-chevron-up');
    });
    $(".toggle-project-stages").not(toggleDiv).stop(true).slideUp(200);
});

Example fiddle

Answer 4

＆＃13;

＆＃13;

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function (e) {
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);
    $(".toggle-project-stages").not(toggleDiv).slideUp(200);

    var $i = $('i', this).toggleClass('fa-chevron-down fa-chevron-up')
    $('.toggle-project-status-downArrow i').not($i).removeClass('fa-chevron-up').addClass('fa-chevron-down')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

<br/><br/>

<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;