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事件描述

回答

相關問題