如果div可見，則切換圖標

如果toggle-project-stages div可見，如何在鏈接上將圖標類別從fa-chevron-down切換爲fa-chevron-up？如果div可見，則切換圖標

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

來源

2015-07-10 brunodd

您可以使用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

來源

2015-07-10 10:43:44

可愛！這使它！非常感謝！我將這一個標記爲正確答案。 – brunodd

內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

來源

2015-07-10 10:44:49

嗨，謝謝你的回覆。我嘗試了你的建議，現在已經快到了。一旦我點擊另一個鏈接，箭頭就會向下。檢查出來：http://jsfiddle.net/brunodd/bQ8G3/129/ – brunodd

這是一個修復：http://jsfiddle.net/bQ8G3/133/ –

$(".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>

來源

2015-07-10 11:01:35

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

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

來源

2015-07-11 21:07:12 user38156

如果div可見，則切換圖標

回答

相關問題