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。

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

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

Answer 1

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

这里的问题是你以错误的方式使用jQuery.toggle()函数。 .toggle()表示＆＃34;隐藏或显示＆＃34; jQuery中的一组元素。您无法将两个处理程序传递给.toggle()函数。官方文件是here。

在您的情况下，如果您只想更改不同状态下的显示图像，则只需使用.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 example。

jquery切换slideUp

1 个答案: