在我现有的手风琴上添加箭头

Question

我正在为我们的网站FAQ网页制作手风琴。我已经实现了一个手风琴，但是我被要求在每个问题之前添加箭头(指向右边)，这个箭头指向那个部分被点击时，然后当另一个部分被点击时返回到指向右边。

下面是我现有的代码：http://jsfiddle.net/gvolkerding/ancu6fgu/2/

HTML：

    <div class="accordion-section"><a class="accordion-section-title" href="#how1">How can I insert a question in this spot when we come up with content?</a>
        <div id="how1" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-2">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-2" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-3">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-3" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-4">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-4" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-5">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-5" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-6">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-6" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-7">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-7" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
   </div><!--end .accordion-->

CSS：-手风琴

.accordion {
overflow:hidden;
margin-bottom: 40px;

}

/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:17px;
display:inline-block;
border-bottom:1px solid #e7e7e7;
background:none;
transition:all linear 0.15s;
/* Type */
font-size:1.000em;

color:#00438c;
font-family:'HelveticaNeueW01-45Ligh';

}
.accordion-section-title a:hover {
color: #fff !important;
}
.accordion-section-title > a:focus {
color: #fff !important;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#e7e7e7;
/* Type */
text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
color: #3b3b3b;
font-size: 14px;
line-height: 20px;
}

jQuery：

 $(document).ready(function() {
 function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

    $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
    });


});

我想知道是否有人能帮助我实现这些箭头，因为我不知道如何修改代码以适应这个特性。我真的很感激所有的帮助，如果这是你过去已经不得不回答的问题，我很抱歉。

Answer 1

我只是在每个问题上添加了一个类似于Right (你必须使用箭头图标)的文本。然后，当用户单击任何问题时，在function close_accordion_section上将所有问题更新到右边，并使当前处于click功能下。

脚本

 $(document).ready(function() {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active')
        .find('strong').text('Right');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        $(this).find('strong').text('Down');
        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
  });
});

Fiddle：http://jsfiddle.net/zx18qx02/

Answer 2

JQuery手风琴有"active“和"default”两种状态。根据状态，您可以显示不同的图像。只需按以下方式更新CSS：

 .ui-state-active .ui-icon {
  background-image: url("images/<path to your arrow image>");
}

.ui-state-default .ui-icon {
  background-image: url("images/<path to different arrow image>");
}