jquery 切换上滑

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()表示"hide or show"jQuery中的一组元素。您无法将两个处理程序传递给 .toggle() 函数。官方文档是here.

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

// 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 切换上滑

jquery toggle slideUp

javascript

jquery

toggle