簡單的jQuery可擴展div需要更改箭頭嗎？

Question

我試圖切換箭頭當一個div擴展看到

$(document).ready(function() { 
 
    $('.expandableCollapsibleDiv').click(function() { 
 
var showElementDescription = $(this).find('ul'); 
 
    // var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul'); 
 
    if ($(showElementDescription).is(':visible')) { 
 
     showElementDescription.hide("fast", "swing"); 
 
     $(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up'); 
 
    } else { 
 
     showElementDescription.show("fast", "swing"); 
 
     $(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down'); 
 
    } 
 
    }); 
 
});

.expandableCollapsibleDiv i { 
 
    cursor: pointer; 
 
    margin-right: 10px; 
 
    margin-top: 5px; 
 
    padding-left: 10px; 
 
    float: right; 
 
} 
 

 
.expandableCollapsibleDiv ul { 
 
    border-bottom: 1px solid white; 
 
    clear: both; 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding-bottom: 10px; 
 
    display: none; 
 
    /* visibility: hidden;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<div class="mainDiv"> 
 
    <div class="expandableCollapsibleDiv"> 
 
    <i class="fa fa-2x fa-angle-down"></i> 
 
    <h3><a>NEW YORK</a></h3> 
 
    <ul> 
 
     <li><a>Albany</a></li> 
 
     <li><a>Buffalo</a></li> 
 
     <li><a>Kingston</a></li> 
 
     <li><a>Tonawanda</a></li> 
 
     <li><a>Sherrill</a></li> 
 
     <li><a>Sherrill</a></li> 
 
     <li><a>Oneida</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="expandableCollapsibleDiv"> 
 
    <i class="fa fa-2x fa-angle-down"></i> 
 
    <h3><a>CALIFORNIA</a></h3> 
 
    <ul> 
 
     <li><a>Alameda</a></li> 
 
     <li><a>Bell</a></li> 
 
     <li><a>Banning</a></li> 
 
     <li><a>Campbell</a></li> 
 
     <li><a>Fresno</a></li> 
 
     <li><a>Galt</a></li> 
 
     <li><a>Jackson</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="expandableCollapsibleDiv"> 
 
    <i class="fa fa-2x fa-angle-down"></i> 
 
    <h3><a>WASHINGTON</a></h3> 
 
    <ul> 
 
     <li><a>Asotin</a></li> 
 
     <li><a>Bellingham</a></li> 
 
     <li><a>Bothell</a></li> 
 
     <li><a>Camas</a></li> 
 
     <li><a>Clarkston</a></li> 
 
     <li><a>Cheney</a></li> 
 
     <li><a>Newport</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

的問題，在頁面加載的div設置爲顯示：無，而不是使用CSS可見。箭頭沒有反應，因爲它應該。當div未展開（隱藏）時，我喜歡箭頭指向下方，並指出div是否展開（可見）。 使用可見：隱藏並沒有解決我的問題，因爲div正在使用頁面上的空間。

我該如何解決這個問題？

Answer 1

您錯誤地使用了.find()。另外還有JQuery庫沒有包含在JSFiddle中，所以我包含了這個！

注意：最初箭頭應該是fa-angle-up而不是fa-angle-down。

前：

$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up'); 

後：

$(this).find('.fa').removeClass('fa-angle-down').addClass('fa-angle-up'); 

JSFiddle Demo

$(document).ready(function() { 
 
    $('.expandableCollapsibleDiv').click(function() { 
 
var showElementDescription = $(this).find('ul'); 
 
    // var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul'); 
 
    if ($(showElementDescription).is(':visible')) { 
 
     showElementDescription.hide("fast", "swing"); 
 
     $(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up'); 
 
    } else { 
 
     showElementDescription.show("fast", "swing"); 
 
     $(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down'); 
 
    } 
 
    }); 
 
});

.expandableCollapsibleDiv i { 
 
    cursor: pointer; 
 
    margin-right: 10px; 
 
    margin-top: 5px; 
 
    padding-left: 10px; 
 
    float: right; 
 
} 
 

 
.expandableCollapsibleDiv ul { 
 
    border-bottom: 1px solid white; 
 
    clear: both; 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding-bottom: 10px; 
 
    display: none; 
 
    /* visibility: hidden;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div class="mainDiv"> 
 
    <div class="expandableCollapsibleDiv"> 
 
    <i class="fa fa-2x fa-angle-down"></i> 
 
    <h3><a>NEW YORK</a></h3> 
 
    <ul> 
 
     <li><a>Albany</a></li> 
 
     <li><a>Buffalo</a></li> 
 
     <li><a>Kingston</a></li> 
 
     <li><a>Tonawanda</a></li> 
 
     <li><a>Sherrill</a></li> 
 
     <li><a>Sherrill</a></li> 
 
     <li><a>Oneida</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="expandableCollapsibleDiv"> 
 
    <i class="fa fa-2x fa-angle-down"></i> 
 
    <h3><a>CALIFORNIA</a></h3> 
 
    <ul> 
 
     <li><a>Alameda</a></li> 
 
     <li><a>Bell</a></li> 
 
     <li><a>Banning</a></li> 
 
     <li><a>Campbell</a></li> 
 
     <li><a>Fresno</a></li> 
 
     <li><a>Galt</a></li> 
 
     <li><a>Jackson</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="expandableCollapsibleDiv"> 
 
    <i class="fa fa-2x fa-angle-down"></i> 
 
    <h3><a>WASHINGTON</a></h3> 
 
    <ul> 
 
     <li><a>Asotin</a></li> 
 
     <li><a>Bellingham</a></li> 
 
     <li><a>Bothell</a></li> 
 
     <li><a>Camas</a></li> 
 
     <li><a>Clarkston</a></li> 
 
     <li><a>Cheney</a></li> 
 
     <li><a>Newport</a></li> 
 
    </ul> 
 
    </div> 
 
</div>