如何解决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>
解决方法
创建一个新的CSS类-隐藏：
然后在CSS中：
.hidden {display:none;}
$(document).ready(function () {
$(\'.toggler\').click(function () {
$(\'.event-description\').addClass(\'hidden\');
$(this).parents(\'.event:first\').find(\'.event-description\').removeClass(\'hidden\');
});
});
<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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。