jquery - 隐藏/显示 div 难以正确显示图像

Question

我遇到了一种奇怪的情况，我不确定为什么它不起作用。

我的网站上有一个使用 jQuery 的隐藏/显示 div 常见问题解答部分。

我把所有东西都排好了，一切都很好，除了这个问题。

这就是我的常见问题解答部分的样子。加号箭头实际上是一个减号的图像，其下方有一个加号，如 imageshack 相册的第一张图片所示:(抱歉链接，我的声誉不够高，无法发布图像)

Imageshack album (4 images)

我使用 css 调整了图像大小，仅显示图像的加号部分，如相册的第二张图像所示。

当您单击加号时，它会显示图像的减号部分并显示隐藏的 div(答案)，如相册的第三张图像所示:

右下角的 X 关闭 div ( a href="#")

问题是，当您单击 X 时，它会关闭 div，但减号不会变回加号，如相册的第四张图片所示。

但是当你使用“-”号结束问题时，它会将 pack 变成我想要的加号。

所以基本上，当您点击右下角的“X”时，我需要将“-”号变回“+”号。

我使用的 jQuery 脚本是:

<script type="text/javascript">  
$(document).ready(function(){

$('.faq-row-head a').click(function() {
        $(this).parent().toggleClass('opened');
        $(this).parents('.faq-row').find('.faq-row-entry').slideToggle();
        return false;
    });

    $('.faq-close').click(function() {
        $(this).parents('.faq-row').find('.opened').removeClass('opened');
        $(this).parents('.faq-row').find('.faq-row-entry').slideUp();
        return false;
    });
});

</script>

图像的 Html 是:

<div class="faq-entry"><div class="faq-row">
    <div class="faq-row-head">
        <h5 class="opened"><a href="#"><span></span> Is your service for me?</a></h5>
    </div>

根据评论更新

<div id="faq">
    <div class="faq-entry">
        <div class="faq-row">
            <div class="faq-row-head">
                <h5 class="opened"><a href="#"><span></span> Question-Title</a></h5>
            </div>
            <div class="faq-row-entry" style="display: none;">
                <p>Answer Description</p>
                <div class="faq-row-entry-buttons">
                    <a class="left" href="/contact-us">Support</a>
                    <a class="right" href="/order">Get Started Now</a>
                    <img class="faq-close" src="/wp-content/uploads/2011/03/exit.png" height="32" width"32"/>
                </div>
            </div>
        </div>
    </div>
</div>

CSS 是:

.faq-row-head h5 span, .faq-row-head2 h5 span {
    background: url("/wp-content/uploads/2011/03/faqbuttons.png") no-repeat scroll 0 0 transparent;
    height: 21px;
    left: -28px;
    position: absolute;
    top: -2px;
    width: 21px;
}
.faq-row-head .opened span {
    background-position: 0 -21px !important;
}
.faq-row-head2 h5 span {
    left: -25px !important;
    top: -1px !important;

我可以更改用于加号/减号的图像，并将加号放在顶部，将减号放在底部，但当问题关闭时，减号将显示在我的网站上。所以我需要调整它的大小以显示图像的加号，但我不确定如何做到这一点。如果有人可以帮助我，我将不胜感激。提前致谢

Answer 1

快速修复可能是:

$('.faq-close').click(function() {
    $(this).closest('.faq-row').find('.faq-row-head a').click();
});

这将触发您的 $('.faq-row-head a').click 事件