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，.accordion * { -webkit-盒大小：边界盒; -moz-箱尺寸：边界盒; 箱尺寸：边界盒; }

.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

JQuery Accordion有两种状态“活跃”和“默认”。根据状态，您可以显示不同的图像。只需按如下方式更新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>");
}

Answer 2

我只是为每个问题添加一个像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();
  });
});

小提琴：http://jsfiddle.net/zx18qx02/

将箭头添加到我现有的手风琴中

2 个答案: