slideToggle從相同的DIV類

-1

我試圖在類上實現slidetoggle。我有很多課，但都一樣。它會動態變化，所以類名相同，但會有很多內容。但它不工作。我只希望當我點擊標題然後captionbox將打開，當我點擊接近然後captionbox將接近。slideToggle從相同的DIV類

<div id="list"> 
    <ul> 
     <li id="arrayorder_42"> 
      <div class="captionbox"> 
       <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a> <a href="#" class="collapsed sbtn_gray">close</a> 

      </div> 
      <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a> 
<a href="#" class="caption sbtn_gray">caption</a> 
     </li> 
     <li id="arrayorder_42"> 
      <div class="captionbox"> 
       <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a> <a href="#" class="collapsed sbtn_gray">close</a> 

      </div> 
      <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a> <a href="#" class="caption sbtn_gray">caption</a> 
     </li> 
     <li id="arrayorder_42"> 
      <div class="captionbox"> 
       <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a> <a href="#" class="collapsed sbtn_gray">close</a> 

      </div> 
      <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a> <a href="#" class="caption sbtn_gray">caption</a> 
     </li> 
    </ul> 
</div>

我在stackoverlflow得到了很多答案，我嘗試了很多，但沒有真正的工作。可能是我錯過了一些東西。

$(".caption").hover(function(){ 
    $(this).find('.captionbox').slideToggle(); 
    });

在我的演示

有很多JS代碼，我評論。傢伙可以檢查。 http://jsfiddle.net/t2j162bv/1/演示

來源

2014-09-01 pagol

你的ID是重複 - 無效的代碼。在JSFiddle中，您不會加載jQuery（從下拉菜單中選擇左側菜單）。你的'.caption'只與文本內容鏈接， – Justinas 2014-09-01 11:19:23

在您的標記，captionbox是caption所以

$('.caption').click(function() { 
    $(this).siblings('.captionbox').slideToggle(); 
});

來源

2014-09-01 11:19:41

裏面沒有'.captionbox'謝謝。可能我現在知道關閉，當我點擊關閉。我上傳演示http://jsfiddle.net/t2j162bv/2/ – pagol 2014-09-01 11:35:43

我做到了最後的兄弟。演示是http://jsfiddle.net/t2j162bv/3/

$('.caption').click(function() { 
    $(this).siblings('.captionbox').slideToggle(); 
}); 
$(".collapsed").click(function(){ 
    $(this).parent(".captionbox").slideUp('slow'); 
});

感謝@arun

來源

2014-09-01 15:00:09 pagol

slideToggle從相同的DIV類

回答

相關問題