jquery切换slideUp

Question

(第一码)

$(document).ready(function () {
    var $answers = $('.result_menu');
    $(".result_location").click(function () {
        var $ans = $(this).next(".result_menu").stop(true).slideToggle(300);
        $answers.not($ans).filter(':visible').stop(true).slideUp();
    })

(第二码)

.toggle( function() {
$(this).children("img").attr("src","./img/icon_1_expand.png");
}, function() {
$(this).children("img").attr("src","./img/icon_1_collapse.png");
});

我有切换选项，第一组代码可以正常工作，它可以切换第二组代码，但我有四个div，我需要第二个代码来将“箭头”切换到“关闭”，或者在其他div上单击slideUp时切换到slideUp。

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

我有四个div，当“1”被点击时，它会滑上一个信息，然后当另一个被点击时，当前的一个关闭，新的一个打开。这一切都很好，但我有箭头在每个点击时，箭头切换到不同的形象。这一切都很好，除了一个是打开的，另一个是点击，切换图像箭头不会改变在刚刚关闭时，其他被点击。

Answer 1

基本上，这是一些著名UI框架中的传统Accordion (or collapse)组件。

这里的问题是您以错误的方式使用jQuery.toggle()函数。.toggle()的意思是在jQuery中“隐藏或显示”一组元素。您无法将两个处理程序传递给.toggle()函数。正式文件是这里。

在这种情况下，如果您只想更改不同状态下的显示图像，则只需使用.toggleClass即可。因此，当单击标题时，您可以删除第一个图像的活动类，并为另一个图像添加活动类。然后，您可以使用背景图像来改变不同的状态。可能是这样的：

// js file
$(this).children(".img").toggleClass('active');

// css file
.img {
  background-image: url(./img/icon_1_expand.png);
}

.img.active {
  background-image: url(./img/icon_1_collapse.png);
}

你可以在这里看到Codepen示例。