javascript – “else”没有使用slideToggle处理我的Jquery代码

2019年7月28日 147次阅读

我的网站上有一个部分,带有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>

代码适用于第一次单击,并忽略所有下一次单击.其他不工作.我知道这很容易但是……有时你不能做这么简单的事情

最佳答案 在调用.slideToggle()方法并使用此存储状态隐藏/显示箭头图像之前,请尝试存储.answer元素css display属性的状态：

$("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()),以便您可以使用该状态来控制显示/隐藏的向上/向下箭头.

这是一个更新的working jsFiddle给你看:)

点赞