Скрыть / показать трудности с отображением правильного отображения изображения

Question

У меня какая-то странная ситуация, и я не уверен, почему она не работает.

У меня есть раздел FAQ по скрытию / показу div на моем веб-сайте с использованием jQuery.

Я получил всечтобы все выстроились в очередь, и все прекрасно работает, кроме этой одной проблемы.

Вот так выглядит мой раздел faq.Стрелка плюс на самом деле является изображением знака минус со знаком плюс под ним, как показано на первом изображении альбома imageshack: (извините за ссылку, моя репутация была недостаточно высокой, чтобы публиковать изображения)

альбом Imageshack (4 изображения)

Я изменил размер изображения с помощью 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

Быстрое исправление может быть:

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

Это вызовет ваше $('.faq-row-head a').click событие

Answer 2

Во-первых, используйте closest () вместо родителей (). Это более уместно, так как вы просто хотите подойти к первому подходящему родителю, вместо того, чтобы получить всю родословную.

Во-вторых, у вас есть логика «открыт» против «закрыт» назад.

Когда у него есть класс «открыт», вы показываете знак + и ответ скрыт. Это действительно "закрытое" состояние.

Когда вы щелкаете по нему, чтобы переключить его, вы удаляете «открытый» класс (показывает знак -) и отображаете ответ. Это действительно «открытое» состояние. Теперь, когда вы нажимаете на изображение faq-close, вы пытаетесь найти знак +/- с «открытым» классом, но вы удалили «открытый» класс, чтобы его нельзя было найти.

Я изменил все ваши "открытые" классы CSS на "закрытые" для корректности. А потом я бы добавил «открытый» класс CSS. Всякий раз, когда вы переключаете класс («открыт»), также переключаете класс («закрыт»).

Тогда обработчик кликов с часто задаваемыми вопросами может сделать:

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