Question

我在wordpress网站上使用插件进行常见问题解答部分。当问题被隐藏并且将其更改为 - 当显示答案时，我希望显示一个+图标。我该怎么做呢？ jQuery文件是：

jQuery(document).ready(function($) {

$("div[id^=qa-faq]").each(function () {
    var num = this.id.match(/qa-faq(\d+)/)[1];
    var faqContainer = $('.qa-faqs'); var faq = $('#qa-faq' + num);

    if ( faqContainer.is('.collapsible') ) {
        faq.find('.qa-faq-anchor').bind("click", function() {
            if ( faqContainer.is('.accordion') ) {
                $('.qa-faq-answer').not('#qa-faq' + num + ' .qa-faq-answer').hide();}
            if ( faqContainer.is('.animation-slide') ) {
             $(this).toggleClass("expanded");
                faq.find('.qa-faq-answer').slideToggle();
            }   
            return false;
        });

        $('.expand-all.expand').bind("click", function() {
            $('.expand-all.expand').hide();
            $('.expand-all.collapse').show();
             if ( faqContainer.is('.animation-slide') ) {
                $('.qa-faq-answer').slideDown();
            }});

        $('.expand-all.collapse').bind("click", function() {
            $('.expand-all.collapse').hide();
            $('.expand-all.expand').show();
         if( faqContainer.is('.animation-slide') ) {
                $('.qa-faq-answer').slideUp();
            }});
    }   });

$('.qasubmission').bind("click", function() {$('#postbox').fadeToggle();});

$('#qaplus_searchform').submit(function() {
    link = $(this).find('#qa_search_link').val();
    query = $(this).find('.qaplus_search').val();
    query = query.split(' ').join('+');
    link = link + query;
    location.href = link;
    return false;
});

   });

我页面上的HTML是：

 <div class="art-postcontent clearfix"><div class="qa-faqs qa-category cf animation-slide accordion collapsible">
    <div class="qa-category">
        <h2 class="faq-catname">FQA</h2>
        <div id="qa-faq0" class="qa-faq">
        <h3 class="qa-faq-title"><a class="qa-faq-anchor" href="http://mg-testsite.com/GoldenhershWP/faqs/how-does-laser-ipl-hair-removal-work/">How does laser/ IPL ...?</a></h3>
        <div class="qa-faq-answer"><p>Each....</p>

我有css：

a.qa-faq-anchor    {
   background: url('images/open.png') no-repeat left -50%;
}

但是我无法在课堂上找到背景：url（＆＃39; images / close.png＆＃39;）no-repeat left -50％;

Answer 1

当您单击.qa-faq-anchor时，JQuery会为此添加一个类名expanded。尝试使用这种样式

a.qa-faq-anchor{
    background: url('images/open.png') no-repeat left -50%;
}

a.qa-faq-anchor.expanded{
    background: url('images/close.png') no-repeat left -50%;
}

切换（）旁边的+/-图标

1 个答案: