jQuery单击并显示元素列表答案

【问题标题】：jQuery click and show list of elementsjQuery单击并显示元素列表
【发布时间】：2013-12-13 20:09:11
【问题描述】：

我有来自数据库的元素列表，并用按钮显示在表格中：

<a href="#" class="hiden"></a>

用于显示和隐藏包含在

中的高级信息

<div class="object></div>

我的 jQuery 脚本是：

$(document).ready(function() {
    $(".object").hide();
    $('.hiden').click(function() {
        $(".object").toggle();
    });
});

HTML：

<table class="table table-hover">
<thead>
<tr>
    <th></th>
    <th></th>
    <th></th>
    <th class="but" colspan="2"></th>
</tr>
</thead>
<tbody>
<?php foreach($model as $object): ?>
    <tr>
        <td><a href="#"><?php echo $object->name; ?></a></td>
        <td></td>
        <td></td>
        <td class="but">
        <a href="#" class="hiden"></a> 
        </td>
    </tr>

    <tr>
        <td colspan="4">
            <div class="object">            
                <table class="table table-bordered">
                </table>
            </div>
        </td>
    </tr>
<?php endforeach; ?>
</tbody>
</table>

单击 a.hiden 列表显示的所有元素并单击隐藏所有元素时，我遇到了一些问题。我希望一个元素显示其他元素隐藏。

请帮帮我

【问题讨论】：

哪个元素应该保留而其他元素隐藏？你想做手风琴吗？

标签： javascript jquery html toggle

【解决方案1】：

$(document).ready(function() {
    $(".object").hide();
    $('.hiden').click(function() {
        $(this).parents('tr').next().find(".object").toggle();
    });
});

【讨论】：

【解决方案2】：

Toogle 是正确的方法，但是如果您单击它们并触发事件，则每个元素都必须具有唯一标识符。

【讨论】：

【解决方案3】：

变化：

$(".object").toggle();

到：

$(this).closest('tr').next().find(".object").toggle();

【讨论】：

【解决方案4】：

你描述的行为是你实际编码的。你的选择器

$(".object").toggle()

切换类.object的所有元素，而不仅仅是一个。要仅切换同一表格行中的一个，您可以

$('.hiden').click(function() {
    $(this).parent("tr").next().find(".object").toggle();
});

【讨论】：