動態jQuery切換下拉列表

我在表格中有一些div，只是爲了得到一個很好的設置。當我按下一個div時，文本會在它下面下來，如果再次按下div，文本會再次出現。動態jQuery切換下拉列表

另外，當我按下其中一個div時，左邊的img將顯示一個向下的箭頭，當它正常時，它將顯示一個向右的箭頭。

我在10個div上有這個功能。

我的問題是，當我按div 1，它工作正常，箭頭顯示下來，文本下降..但是當我，例如按另一個div，當第一個打開時，箭頭開始搞砸了..

有沒有辦法在這裏使它動態？

繼承人我JQ：

<script type="text/javascript"> 

$(document).ready(function(){ 
    var tjek = "TRUE"; 
    $(".title").click(function() 
    {                      
     $(this).children('.subtitle').toggle(500); 
     if(tjek == "TRUE") 
     { 
      $(this).css({"background-image" : "url('/images/images/Pil_open.png')"}); 
      tjek = "FALSE"; 
     }else{ 
      $(this).css({"background-image" : "url('/images/images/Pil_normal.png')"}); 
      tjek = "TRUE"; 
     } 
    }); 
});

而且繼承人的HTML：

<table border="0" cellpadding="0" cellspacing="5" style="min-height: 100px; width: 698px;"> 
<tbody> 
<tr> 
<td valign="top">                                  
<div class="title"> 
    <p id="tekst"> 
     <b>BLA BLA BLA</b> 
    </p> 
    <div class="subtitle"> 
     TEXT TEXT TEXT TEXT 
    <div> 
</div> 
</td> 
...

來源

2013-03-06 Patrick R

可以使用toggleClass做到這一點。

$(".title").click(function() { 

    var $element = $(this); 

    $element.toggleClass('open'); 
    $element.children('.subtitle').toggle(500); 
});

的CSS

.title { 
    background-image: url('/images/images/Pil_normal.png'); 
} 

.title.open { 
    background-image: url('/images/images/Pil_open.png'); 
}

Demo

來源

2013-03-06 12:06:31

太謝謝你了！我一直在嘗試這樣做，並且找不到方法。它就像一個魅力 – 2013-03-06 12:42:17

你能再次幫助我嗎？如果我想要關閉所有其他div，當選擇新的div進行查看時，我該怎麼做？我試過$（「subtitle」）。hide（）;但它不會改變箭頭的方向，但不能看到我可以如何將它們混合在一起 – 2013-03-06 13:02:49

動態jQuery切換下拉列表

回答

相關問題