jquery - 将箭头添加到我现有的 Accordion

Question

我正在为我们的网站常见问题解答页面制作 Accordion 。我实现了 Accordion ，但我被要求在每个问题前添加箭头(指向右)，当单击该部分时指向下方，然后在单击另一个部分时返回指向右侧。

这是我现有的代码: 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 -----/ .accordion, .accordion * { -webkit-box-sizing:边框框； -moz-box-sizing:边框框； 框大小:边框框；

.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 将所有问题更新为 Right，并在 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/