jQuery手風琴菜單更改箭頭圖標

Question

我是一名完整的Jquery新手，但是我設法整理了一個手風琴菜單以獲取一些幫助文本。 我目前擁有它，因此如果您打開一個面板，然后單擊以打開另一個面板，則第一個面板將關閉。 現在，我包含了一些箭頭，當您打開面板時，這些箭頭會從右向向下變化，反之亦然。

我遇到的問題是，當我在打開第一個面板的情況下單擊另一個面板時，圖標不會變回到右側。 希望有人能夠指出我出了問題的地方，因為我現在已經嘗試了幾件事，並且似乎已經完成了除我想要的情況以外的所有情況。

謝謝。 擔

 $(document).ready(function($) { $('#accordion').find('.accordion-toggle').click(function(){ //Expands/collapses panel $(this).next().slideToggle(0); $("i",this).toggleClass("fa-angle-down"); //Hides other panels $(".accordion-content").not($(this).next()).slideUp(0); $(".accordion-content").find("i").not($(this).next()).toggleClass("fa-angle-down"); }); }); 

 <style> .accordion-toggle {cursor: pointer;} .accordion-content {display: none;} .accordion-content.default {display: block;} .pHeader { font: 16px Arial, Helvetica, sans-serif; color: #555; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; font-size-adjust: none; font-stretch: normal; margin-left: 0px; font-weight:normal; } .accordion-content p { font: 12px/16px Arial, Helvetica, sans-serif; color: #555555; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; font-size-adjust: none; font-stretch: normal; margin-left: 10%; } .pUL { font: 12px Arial, Helvetica, sans-serif; color: rgb(102, 102, 102); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; font-size-adjust: none; font-stretch: normal; margin-left: 60px; } .accordion-toggle hr { height: 1px; background-color: #ccc; margin-top: -1px; } .accordion-toggle i { font-size: 27px; color:#999; font-weight: bold; line-height: 15px; float: right; } </style> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <p style="font-size: 16px; width: 100%; text-align:center;">Frequent Asked Questions</p> <div id="accordion"> <h4 class="accordion-toggle"> <span class="pHeader">Products</span><i class="fa fa-angle-right fa-2x"></i> <hr noshade /></h4> <div class="accordion-content"> <p style="font-weight:bold; font-size:14px;">Example 1</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr noshade style="height:1px; background-color:#ccc; margin-left: 10%;" /> <p style="font-weight:bold; font-size:14px;">Example 2</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <h4 class="accordion-toggle" style="padding-top: 10px;"><span class="pHeader">Orders</span><i class="fa fa-angle-right fa-2x"></i><hr noshade /></h4> <div class="accordion-content"> <p style="font-weight:bold; font-size:14px;">Example 1</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <hr noshade style="height:1px; background-color:#ccc; margin-left: 10%;" /> <p style="font-weight:bold; font-size:14px;">Example 2</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr noshade style="height:1px; background-color:#ccc; margin-left: 10%;" /> <p style="font-weight:bold; font-size:14px;">Example 3</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> 

Answer 1

只需將li的fa-angle-down移開，它將使箭頭向右。

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){
$("#accordion i").removeClass("fa-angle-down");
      //Expands/collapses panel
      $(this).next().slideToggle(0);
      $("i",this).toggleClass("fa-angle-down");

      //Hides other panels
      $(".accordion-content").not($(this).next()).slideUp(0);
      $(".accordion-content").find("i").not($(this).next()).toggleClass("fa-angle-down");


    });
  });

演示 https://jsfiddle.net/1pwge6vr/

Answer 2

嘗試這個 ：

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(
        function() {

            var selectedPanel = $(this).next();

            // Hides other panels
            var otherPanels = $(".accordion-content").not(selectedPanel);
            otherPanels.slideUp(0);

            // Make other arrows turn right
            var arrows = otherPanels.prev().find("i");
            arrows.removeClass("fa-angle-down");

            // Expands/collapses panel
            selectedPanel.slideToggle(0);
            $("i", this).toggleClass("fa-angle-down");

        }
    );
});