"else" не работает над моим кодом Jquery с slideToggle

Question

У меня есть раздел на моем сайте, с блоками Q / A. Если щелкнуть заголовок вопроса (h3), должен появиться ответ, скрытый под вопросом.

Итак, справа от названия вопроса у нас есть стрелка вниз и стрелка вверх. Как вы, возможно, понимаете, это должно быть показано стрелкой вниз, когда вопрос «закрыт», и стрелкой вверх, когда вопрос «открыт».

    $("img.up").hide();

    $(".question h3").click(function(){
    
    	var b = $(this);
    
    	var a = b.parent(".question").children(".answer");
    
    	a.slideToggle();
    
    	if(a.css('display') == 'block'){
    	    b.children("img.down").hide();
    	    b.children("img.up").show()
        } else {
    	    b.children("img.up").hide();
    	    b.children("img.down").show()
        };
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
	    <h3>
		    А я могу ездить на Mercedes S-Class без прав?
			    <img src="img/icons/down.png" alt="" class="down">
				<img src="img/icons/up.png" alt="" class="up">
		</h3>
		<div class="answer">
		    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
		</div>
    </div>

Код работает при первом клике и игнорирует все последующие клики. Остальное не работает. Я знаю, что это легко, но ... Иногда вы не можете делать такие простые вещи

Answer 1

Вот решение вашей проблемы. Я добавил

 $('h3 img').toggle();

, который соответственно переключит изображение.

Ниже приведен рабочий код.

$("img.down").hide();

$(".question h3").click(function(){

    var b = $(this);

    var a = b.parent(".question").children(".answer");

    a.slideToggle();

   $('h3 img').toggle();
    
    

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
    <h3>
        А я могу ездить на Mercedes S-Class без прав?
            <img src="img/icons/down.png" alt="down" class="down">
            <img src="img/icons/up.png" alt="up" class="up">
    </h3>
    <div class="answer">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
    </div>
</div>

Answer 2

Попробуйте сохранить состояние атрибута отображения css элементов .answer, прежде чем вызывать метод .slideToggle(), и используйте это сохраненное состояние, чтобы скрыть / отобразить изображения стрелок:

$("img.up").hide();

$(".question h3").click(function(){

    var b = $(this);

    var a = b.parent(".question").children(".answer");

    // Store isVisible state for answer element before ..
    var isVisible = a.css('display') == 'block';

    // ..you call slideToggle()
    a.slideToggle();
     
    if(isVisible){
        b.children("img.down").hide();
        b.children("img.up").show()
    } else {
        b.children("img.up").hide();
        b.children("img.down").show()
    };

});

img {
  width:1rem;
  height:1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="question">
    <h3>
        А я могу ездить на Mercedes S-Class без прав?
            <img src="https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png" alt="" class="down">
            <img src="https://openclipart.org/image/2400px/svg_to_png/154969/1313159942.png" alt="" class="up">
    </h3>
    <div class="answer">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
    </div>
</div>

Причина сохранения этого в том, что slideToggle() немедленно устанавливает отображение ответа для блока независимо от анимации (либо для закрытия, либо для открытия). По этой причине вам необходимо определить, является ли ответ видимым, прежде чем анимировать div ответа (посредством вызова slideToggle()), чтобы вы могли использовать это состояние для управления тем, какая стрелка вверх / вниз показывается / скрывается.

Вот обновленный рабочий jsFiddle , который вы можете увидеть:)