Question

我有一个常见问题解答，我想在问题的右侧附上一张图片，告诉该人如果关闭则关闭。

这就是我所拥有的：

$('.header-person').click(function() {
    $(this).next('.entry').slideToggle("fast")
    return false;
});

我目前在问题旁边有两张图片，如下：

question 1&nbsp;&nbsp;

<span class="icon"><img src="open.png" width="16" height="16" border="0" /></span>


<span style="display:none;" id="icon-delete"><img src="close-32.png" width="16" height="16" border="0" /></span>

谢谢！

Answer 1

无需将图像包裹在跨度中。您可以直接将每个图像的类放在其上，然后以这种方式切换。此外，您可能需要注意.next()的功能，因为它可能无法满足您的预期效果。它只抓住立即下一个兄弟。这意味着如果您调用它的元素和您要查找的元素之间有任何兄弟姐妹，您将无法找到它。

查看.next()：http://api.jquery.com/next/

的文档

而是尝试使用.nextAll()和过滤器选择器来查找所需的元素。

.nextAll()的文档：http://api.jquery.com/nextAll/

话虽如此，这是一个做你想要的演示（我认为）：http://jsfiddle.net/Ender/9eXnW/1/

基本上您要做的就是确保您可以正确设置每个图像的可见性，然后只需选择它们并在点击事件中为它们调用.toggle()。

查看代码：

$(function() {
    $('.entry').hide();
    $('.header-person').click(function(e) {
        e.preventDefault();
        $(this).nextAll('.entry:first').slideToggle("fast");
        $(this).children('.close-icon, .open-icon').toggle();
    });
});

此外，我已将您的return false;更改为e.preventDefault()

Answer 2

请填写完整的代码，以便我们了解可以使用的选择器。

但基本上，看起来你需要做的就是：

$(selectorforopen).toggle();
$(selectorforclosed).toggle();

这基本上显示它是否隐藏并隐藏，如果它没有显示。

使用jquery单击选择器时交换图像

2 个答案: