Div toggler - переключение текущего описания события div

Во-первых, я должен сказать, что я новичок в jQuery, и мне это нужно для моего класса HTML/JS. Итак, вот что мне нужно сделать

    <div class="event">
    <div class="event-bar">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td class="space" colspan="7">
            </tr>
            <tr>
                <td class="event-date"><p>22 IV</p></td>
                <td class="event-place">19.30<br/>Kościół Księży Misjonarzy</td>
                <td class="event-doc">carte blanche</td>
                <td class="event-title">johann sebastian bach<br/>Pasja wg św. Mateusza</td>
                <td class="event-performers">Anna Schoek<br/>Stefan Telefan<br/>Lorem Ipsum</td>
                <td class="event-leader">dyrygent</td>
                <td class="event-toggler"><div class="toggler"></div></td>
            </tr>
            <tr>
                <td class="space" colspan="7">
            </tr>
        </table>
    </div>
    <div class="event-description">
        <p>...</p>
    </div>
</div>

То, что мне нужно достичь, это div. переключатель, который при нажатии должен переключать div. описание события, есть X div.event. Каждый раз, когда вы нажимаете div. toggler должен только переключать текущее описание события div и скрывать другое, если другое открыто (по одному переключению за раз).

Я не могу бороться с .parent(), чтобы выйти за стол.


toggle jquery
person kroma    schedule 26.05.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Создайте новый класс css - hidden: затем в css:

.hidden {display:none;}

JQuery:

 $(document).ready(function () {
        $('.toggler').click(function () {
            $('.event-description').addClass('hidden');
            $(this).parents('.event:first').find('.event-description').removeClass('hidden');
        });
    });

должен сделать это.

person BonyT    schedule 26.05.2011
comment
ой извините - пропустил находку! - person BonyT; 26.05.2011
comment
работает почти отлично, что я сделал: jquery: $('.toggler').click(function(){ $(this).parents('.event:first').find('.event-description').toggle(); }); но он не скрывает другое открытое описание .event, только одно должно быть видно одновременно - person kroma; 26.05.2011
comment
Наконец-то мне удалось добиться того, чего я хотел. Спасибо BonyT за то, что привели меня к этому! $('.toggler').click(function(){ $('#events-list').find('.event-description').hide(); $(this).parents('.event:first').find('.event-description').fadeToggle(); }); - person kroma; 26.05.2011

arrow_upward
0
arrow_downward

Я думаю, вам нужен jquery Accordion http://jqueryui.com/demos/accordion/

person Jayantha Lal Sirisena    schedule 26.05.2011