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

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

2 голосов
/ 26 мая 2011

Во-первых, я должен сказать, что я новичок в 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(), чтобы выйти за стол.

Ответы [ 3 ]

0 голосов
/ 26 мая 2011

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

.hidden {display:none;}

JQuery: 

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

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

0 голосов
/ 08 августа 2012 
<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:10px;
text-align:center;
background:#70DBFF;
border:solid 1px #33CCFF;
}
div.panel
{
height:400px;
display:none;
}
</style>
</head>

<body>
Hi skcjlvbcuvb cxkjvcxjkvhcxj vxcjvhxjchvjxck vxcjvjkxchv xcvkjxcvjkxcjv

cxkvbxcjkv xckjvbjxck vjcxkbv

<div class="panel">
<p>hi...................................</p>
<p>describe data to be toggle her. this can be used any side / place of a web page</p>
</div>
<input type="button" class="flip" value="Show/Hide Panel" />

</body>
</html>
0 голосов
/ 26 мая 2011

Я думаю, вам нужен JQuery Аккордеон http://jqueryui.com/demos/accordion/

...