Question

好的，将问题重做为更简单的问题。

这是我的HTML代码。

<p>
<span id="tripTitle">Trip #1</span>&nbsp;
    <span class="expandicon" style="display:none;">
        <span class="flip">
        <img class="expand" src="img/expand1.png" />
        </span>
    </span>
    <span class="shrinkicon">
        <span class="flip">
        <img class="shrink" src="img/shrink1.png" />
        </span>
    </span>
</p>
<div class="panel"><table id="table" width="100%">
some text here.
</div>

这是Java：

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });

HTML将在单个页面中或每次创建的Trip中重复10次。 javascript代码将使用类“panel”切换所有div。问题是：有没有办法让切换的唯一div是点击“翻转”类的图像最近或旁边的那个？

顺便说一下，这是一个jsfiddle。 http://jsfiddle.net/LyUnB/

Answer 1

使用

$(this).parent().nextAll(".panel:eq(0)").slideToggle("slow");

.panel是.flip

的parentNode的兄弟

Answer 2

或者你可以简单地使用

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).parent().next(".panel").slideToggle("slow");
     });
});

你在另一个范围内有扩展，缩小按钮，所以当你在jQuery中检查.next()它没有找到'.panel'时，我们使用parent()后退一步然后{ {1}}会将我们带到.next() div

谢谢

Answer 3

尝试：

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).closest(".shrinkicon").next(".panel").slideToggle("slow");
    });
});

修改

在我的系统上运行正常。以下是jsfiddle
的工作示例

使用slideToggle（）作为最近或下一个div

3 个答案: