文章/答案/技术大牛

发布

问表的jquery常见问题
EN

Stack Overflow用户

提问于 2011-05-30 17:03:49

回答 3查看 325关注 0票数 1

当我按下一个链接时，所有的td都会显示出来。如何在按下时隐藏和显示每个td？

    <head>

<style type="text/css">
.details{display:none;}
</style>
<script type="text/javascript">
$().ready(function() {
    $('a.buy').click(function() {
        $('.details').slideToggle('fast', function() {
        });
    });
});
</script>
<body>
<table>
    <tr>
        <td> <a class="buy" href="#">more details</a> </td> 
    </tr>
    <tr>
        <td class="details">text 1 text 1 text 1 text 1 </td>
    </tr>
        <tr>
        <td> <a class="buy" href="#">more details</a> </td> 
    </tr>
    <tr>
        <td class="details">text 2 text 2 text 2 text 2 </td>
    </tr>
        <tr>
        <td> <a class="buy" href="#">more details</a> </td> 
    </tr>
    <tr>
        <td class="details">text 3 text 3 text 3 text 3 </td>
    </tr>
</table>              

</body>
</html>

jquery

回答 3

Stack Overflow用户

发布于 2011-05-30 17:11:31

$('.details')寻址具有此类的所有单元格。您必须特别针对您想要的目标：

$(this) // <-- this is the currently clicked link
  .closest('tr') // <-- go up until the next tr
  .next() // <-- next tr
  .find('td.details').show(); // <-- show the cell there

如果您想隐藏所有其他内容，只需在显示所需内容之前全部隐藏即可：

$('.details').hide();
// then the above

这并不是特别有效率，但它可以完成工作。

票数 0

Stack Overflow用户

发布于 2011-05-30 17:21:14

您可以使用.closest()和.find() jquery函数来实现这一点。以下是jsfiddle中的工作示例

票数 0

Stack Overflow用户

发布于 2011-05-30 17:33:59

在超文本标记语言中使用<dl> <dt> <dd> (最合适)

HTML

<dl class="faq">
<span style="font-size: 14px; ">
<span class="Apple-style-span" style="font-family: Verdana, Geneva, sans-serif; ">
    <dt><span style="color: rgb(10, 171, 253); ">Question?</dt>

    <dd>Answer.<a class="close" href="#">Close Text</a></dd> 
</span>
</span>
</dl>

jQuery

$('.faq dd').hide(); 

$('.faq dt').click(function(){ 
        $(this).next('dd').slideToggle('slow'); 
});    
$('a.close').click(function (){ $(this).parent('dd').slideUp('slow'); });

DEMO

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6174272

复制

相似问题

问表的jquery常见问题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表的jquery常见问题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表的jquery常见问题
EN