Div切换器-切换当前的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。切换器仅应切换当前div事件描述，如果其他打开，则隐藏其他事件（一次切换一次）。我真的不能和ѭ1战斗到桌子外面。

解决方法

创建一个新的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\');
        });
    });

应该这样做。 ,我认为您需要jquery手风琴http://jqueryui.com/demos/accordion/ ,

<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>

div 事件事件切换切换切换器当前描述

Div切换器-切换当前的div事件描述

问题描述

解决方法

相关问答