Question

我有点奇怪的情况，我不确定它为什么不起作用。

我的网站上有一个使用jQuery的hide / show div FAQ部分。

我把所有事情都排好了，除了这个问题外，一切都很好。

这是我的faq部分的样子。加号箭头实际上是一个减号的图像，下面有一个加号，如imageshack相册的第一张图片所示:(对不起链接，我的声誉不够高，无法发布图片）

Imageshack album (4 images)

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

单击加号时，它会显示图像的减号部分并显示隐藏的div（答案），如相册的第3张图片所示：

右下角的X关闭div（a href =“＃”）

问题是当你点击X时，它会关闭div但是减号不会变回加号，如专辑的第四张图片所示。

但是当你使用“ - ”符号关闭问题时，它会打包成我想要的加号。

所以基本上，当你点击右下角的“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

首先，使用closest()代替parent（）。这里更合适，因为你只想走到第一个匹配的父母，而不是获得整个祖先。

其次，你的逻辑是“开放”与“封闭”向后。

当它有一个“打开”类时，你显示+号并隐藏答案。这实际上是“封闭”状态。

当您单击它以切换它时，您将删除“已打开”类（显示 - 符号）并显示答案。这实际上是“开放”的状态。现在，当您单击常见问题解答关闭图像时，您尝试使用“已打开”类找到+/-符号，但您已删除“已打开”类，因此无法找到它。

我已将所有“已打开”的css类更改为“已关闭”以确保正确性。然后我会添加一个“打开”的CSS课程。每当你toggleClass（“打开”），也toggleClass（“关闭”）。

然后你的faq-closed点击处理程序可以执行：

$(this).closest('.faq-row').find('.opened').toggleClass('opened').toggleClass('closed');

Answer 2

快速修复可能是：

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

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

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

2 个答案: