我的Jquery代码中的 "else" 无法正常工作，配合slideToggle使用。

Question

我网站上有一个关于问答的板块。如果我们点击问题标题（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>

代码在第一次点击时有效，忽略所有后续的点击。否则不起作用。我知道它很简单，但有时你做不了这么简单的事情。

- Captainflint

---

尝试增加更多的测试，您假设很多测试都会成功...例如当您分配给a时，为什么不在尝试获取子元素之前检查(".question")的返回值呢？此外，在使用(".answer")获取css之前，请测试它是否符合您的预期。 - SPlatten

使用您提供的代码片段来处理工作。也许这是与页面上其他一些冲突的js代码相关的问题？ - Lelio Faieta

它似乎可以工作，但实际上<img>标签并没有切换，因为slideToggle不会改变div的CSS的display属性 - 它只会改变其高度。 - Chris Lear

Answer 1

在调用.slideToggle()方法之前，尝试存储.answer元素的css显示属性状态，并使用此存储的状态来隐藏/显示箭头图像。

$("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，供您查看 :)

- Dacre Denny

---

我认为这并没有解决问题，即“img”标签无法切换的问题。您的“img”标签是不可见的，因此（据我所知）您的代码与原帖作者的代码一样有效。 - Chris Lear

@ChrisLear 谢谢你指出来！我刚刚更新了答案。 - Dacre Denny

Answer 2

这是你问题的解决方案。我已经添加了。

 $('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>

- Sahil Dhir