Question

我有一个slidetoggle，可以在第二列的同一个表格单元格中切换div。这非常有效。但我也希望点击表格第一列的单元格中的某些内容来切换第二列中的相同div。

我认为第一列中的操作需要有所不同：

jQuery(".heading2").click(function(){jQuery(this).next(".content2").slideToggle(500);});

类似的东西：

jQuery(".heading1").click(function(){jQuery(this).next(".content2" *in next column* ).slideToggle(500);});

HTML 是这样的：

   <tr>
    <td valign="top" align="left" width="70">
        <div class="heading1">
            <img id="After Earth" src="http://content6.flixster.com/movie/11/17/10/11171008_mob.jpg" style="border-width:0px;cursor:pointer;" />
        </div>
    </td>

    <td valign="top" align="left">

        <div class="heading2">
            <b class="title1">After Earth</b> <img id="eye771268396" src="images/eye15.png" style="border-width:0px;" class="hidepic" /><br />
            <b>Starring: </b>Will Smith, Jaden Smith, Zoe K..<br />
            <b>Director: </b><br />
        </div>

        <div class="content2">
            <b>Rating: </b>PG-13<br />
            <b>Runtime: </b>100 mins<br />
            <b>Description: </b>A crash landing leaves teenager Kitai Raige (Jaden Smith) and his legendary father Cypher (Will Smith) stranded on Earth, 1,000 years after cataclysmic events forced humanity's escape. With Cypher critically injured, Kitai must embark on a perilous journey to signal for help, facing uncharted terrain, evolved animal species that now rule the planet, and an unstoppable alien creature that escaped during the crash. Father and son must learn to work together and trust one another if they want any chance of returning home. (c) Sony<br />
        </div>

    </td>
</tr>

Answer 1

这里是 FIDDLE

jQuery(".heading2").click(function () {
    jQuery(this).next(".content2").slideToggle(500);
});
jQuery(".heading1").click(function () {
    jQuery(this).closest('td').next('td').find(".content2").slideToggle(500);
});

Answer 2

我建议，根据我对你的问题的理解：

jQuery('.heading1, .heading2').click(function(){
    jQuery(this).closest('tr').find('.content2').slideToggle(500);
});

JS Fiddle demo

参考文献：

closest()。
find()。

JQuery在表格的下一栏中滑动DIV？

2 个答案: