Question

我有这个jquery代码来添加onclick事件，以最小化和最大化图像折叠并使用类mainBody扩展div。

在我添加div divSectionInfo之前它正在工作，当你点击icon16图像并在点击关闭图像时折叠divSectionInfo时，它现在意味着扩展。

我遇到问题，用类mainBody选择下一个div，用divSectionInfo类跳过div。

Html示例

<span class="section" style="clear: both">
    <div class="top">
        <h2>
            <a href="javascript: void(0);">Heading </a>
            <img src='../Images/min.gif' style='float:right;' alt='minimize'/>
            <img src='../Images/max.gif' style='float:right;' alt='maximize'/>
            <img src="../Images/icon16.png" style="margin-right: 50px;" alt="expand divSectionInfo" />
        </h2>
    </div>
    <div class="divSectionInfo">
        <span>This is text</span>
        <span>This is text</span>
            <img src="../GlobalResources/Images/close.png" alt="collapse divSectionInfo"/>
        </div>
    <div>
    <div class="mainBody"></div>//This div is supposed to collapse and expand when minimize and maximize button are clicked.
    </div>

Jquery Code。

  $("img[alt='maximize']").click(function (e) {
    //alert("2");
    $(this).closest("div").next("div").slideDown("fast");
    e.stopPropagation();
    return false;
});

要查看工作示例HERE，这是在使用divSectionInfo类添加div之前

这是使用divSectionInfo HERE

类来实现div的

PD：对于那些不了解jsbins的人，你可以点击右上角的标签来编辑代码，当你把鼠标放在那个角落时出现，然后用jsbin编辑编辑。

感谢。

Answer 1

jQuery的：

$(this).closest("div").siblings("div").find("div.mainBody:eq(0)")

可以使用，但您应该使用其他答案中提到的ID。基本上不，具体取决于深层节点层次结构（父div与包含div同级div的兄弟mainBody - 首先请！）而是转到.section，然后找到.mainBody（参见Nick Craver的answer）。 这样，如果（当！）标记发生变化，你的选择器就不容易出错了。

Answer 2

我在这里使用.closest()和.find()最灵活，就像这样：

$("img[alt='maximize']").click(function (e) {
  $(this).closest(".section").find(".mainBody").slideDown("fast");
  e.stopPropagation();
});

You can see your demo updated/working with this code here。我会给你的按钮一个类，例如：

<img class="minimize" src='http://png.findicons.com/files/icons/653/the_spherical/32/minimize.png' style='float:right;' alt='minimize'/>
<img class="maximize" src='http://www.winnipegringette.com/images/icons/maximize.png' style='float:right;' alt='maximize'/>

然后更改您的选择器，使用$("img.maximize")代替$("img[alt='maximize']")。

在另一个div之后选择带有“n”类的div与另一个带有Jquery的类

2 个答案: