Div toggler - 切换curent div事件描述

首先，我需要说我是jQuery的初学者，我需要这个用于我的HTML/JS类。所以这里是我需要做的Div toggler - 切换curent div事件描述

<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的事件描述，并隐藏其他如果其他打开（一次切换一次）。

我无法真正与.parent()争取到外面的桌子。

来源

2011-05-26 kroma

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

应该这样做。！

来源

2011-05-26 09:15:01 BonyT

没有真正的工作:( – kroma 2011-05-26 09:41:30

哎呀对不起 - 错过了发现 – BonyT 2011-05-26 09:57:41

作品差不多大，我所做的是：jQuery的： '$（ 'toggler。'）点击（函数（）{$ 。（this）.parents（'。event：first'）。find（'。event-description'）toggle（）; }）;' 但它不隐藏其他打开的.event-description，只有一个应该是（一次可见） – kroma 2011-05-26 10:01:10

我想你需要的jQuery手风琴http://jqueryui.com/demos/accordion/

来源

2011-05-26 09:05:53

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

来源

2012-08-08 13:33:02

Div toggler - 切换curent div事件描述

回答

相关问题