jQuery нажмите и покажите список элементов

0

У меня есть список элементов из БД и показать в таблице с помощью кнопки:

<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 все элементы списка показывают и щелкают все элементы скрыть. Я хочу, пока один элемент отображает другие элементы.

пожалуйста, помогите мне

  • 0
    Какой элемент должен оставаться, пока другие прячутся? Вы пытаетесь сделать аккордеон?
Теги:
toggle

4 ответа

0
Лучший ответ
$(document).ready(function() {
    $(".object").hide();
    $('.hiden').click(function() {
        $(this).parents('tr').next().find(".object").toggle();
    });
});
0

Поведение, которое вы описываете, - это то, что вы на самом деле закодировали. Ваш селектор

$(".object").toggle()

переключает все элементы с классом .object, а не только один. Чтобы переключить только ту, что в одной и той же строке таблицы, вы могли бы

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

Toogle - это правильный путь, но каждый из ваших элементов должен иметь уникальный идентификатор, если вы нажмете на них и активируете событие.

0

Изменить:

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

чтобы:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню