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");


    });
  });

Demo 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");

        }
    );
});

JQuery手风琴菜单更改箭头图标

2 个答案: