帶有向上和向下箭頭的手風琴

Question

我正在嘗試使用向上和向下箭頭創建jQuery手風琴。 我為此使用了很棒的字體上下角度。 一切都完全正確，關閉手風琴時顯示向下箭頭，打開手風琴時顯示向上箭頭。 但是唯一的問題是它僅在用戶單擊特定的手風琴標題時才起作用。 當用戶單擊另一個標題時，箭頭不會改變。

 var toggleHeader = $('.toggle-header'); var toggleContent = $('.toggle-content'); toggleHeader.click(function() { toggleHeader.removeClass('active'); $(this).addClass('active'); $(this).find('.toggle-arrow-down').hide(); $(this).find('.toggle-arrow-up').show(); if ($(this).next('div').is(':visible')) { $(this).next('div').slideUp(); $(this).find('.toggle-arrow-down').show(); $(this).find('.toggle-arrow-up').hide(); } else { toggleContent.slideUp(); $(this).next('div').slideDown(); } return false; }); 

 .toggle-header { border: 1px solid #ccc; padding: 10px; position: relative; } .toggle-header.active { background: #ccc; } .toggle-header .toggle-switch { position: absolute; top: 10px; right: 20px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle"> <div class="toggle-header"> <h3> This is toggle title </h3> <div class="toggle-switch"> <i class="fa fa-angle-up arrow-up"></i> <i class="fa fa-angle-down arrow-down"></i> </div> <div class="toggle-content"> This is the paragraph </div> <div class="toggle"> <div class="toggle-header"> <h3> This is toggle title </h3> <div class="toggle-switch"> <i class="fa fa-angle-up arrow-up"></i> <i class=" fa fa-angle-down arrow-down"></i> </div> <div class="toggle-content"> This is the paragraph </div> </div> </div> </div> </div> 

Answer 1

您需要找到要在click事件上更改的活動項目，然后進行更改。 您可以使用：

var active = $(this).find(".active");

在您的點擊功能（其中$(this)是$('.toggle-header') ）中，然后使用箭頭和活動狀態等來完成您想要的任何操作。

例如active.removeClass("active").slideUp().find(".toggle-arrow-up").hide(); 等等。

但是，我認為您要走的路可能不是最穩健的。 我強烈建議您看一下可笑的簡單手風琴編碼示例，該示例列出了最簡單的手風琴（html，css和腳本），對於構建所需的額外功能非常有用。