jquery slideToggle打開所有div而不是隻需要的div

我有一個頁面，可以有一個可變數字<div>的想法是人們可以點擊+符號這是一個<img>然後div鏈接到img標籤將會顯示。jquery slideToggle打開所有div而不是隻需要的div

我目前有：

PHP/HTML

$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">'; 

$table .= '<div>'.$plus.'</div>'; 
$hidden .= '<div class"diary">-Content-</div>';

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $(".clickme").click(function() { 
     $(".diary").slideToggle("slow", function() { 
     }); 
    }); 
}); 
</script>

顯然，這將打開的所有div，而不僅僅是一個被點擊的一個。我已經看了看這裏的其他類似的問題，並嘗試了一些變化，如：

$(document).ready(function(){ 
    $(".clickme").click(function(){ 
     $(this).next(".diary").toggle(); 
     }); 
});

然而，當我嘗試這些只是停止工作完全。即沒有divs向上或向下滑動。我看到JS小提琴上的例子，但只要我將它應用到我的頁面上，我什麼也得不到。我可能做了一件非常愚蠢的事情，它不能工作，但看不到什麼。感謝您的任何幫助。

的HTML輸出應該像

<div> 
    <div> 
     <table> 
      <img class="clickme"> 
     </table> 
    </div> 
    <div class="diary"> 
     <table> content </table> 
    </div> 
<div>

來源

2016-08-02 dyer926

（基於提供THT HTML）最佳的方法是將具有匹配索引添加屬性到兩個元件

<div>test toggle 
    <div class="clickme" data-index="1">click me</div> 
    <div class="toggle" id="obj_1">toggled field</div> 
</div>

，然後在JQuery：

 $(function() { 
      $(".clickme").click(function() { 
       //get number from clicked element's attribute 
       var index =$(this).attr('data-index'); 
       //select element with id that matches index and toggle 
       $('#obj_'+index).toggle(); 
      }); 
     })

來源

2016-08-02 15:15:45

請參閱更新以使用'parent（）'。沒有意識到他們是兄弟姐妹 –

感謝您的建議，但像所有其他我試圖專注於一個div的例子，沒有任何動作。我無法弄清楚怎麼回事 – dyer926

我試過了。父（）更新，仍然沒有改變，有什麼可以阻止這個工作？ – dyer926

看完你的代碼後，我可以看到第slideToggle調用在.diary類中進行，可能適用於每個元素。

我建議你把你的日記div放在$ plus div裏面，然後使用jquery的孩子，或者簡單地給你的.diary div一個唯一的id並使用你的的id屬性。

編輯：

下面是一個簡單的HTML輸出：

<div class="clickme"> <div class="diary">CONTENT HERE</div> </div>

在CSS補充一點：

.clickme { background: url('images/plus.png') no-repeat top left; min-width: 20px; min-height: 20px; cursor: pointer; }

腳本標籤：

<script> $(function() { $(".clickme").click(function() { $(this).children().slideToggle("slow"); }); }); </script>

請注意，我會讓你的用法和樣式目的的日記課，但它沒有在任何地方使用。

來源

2016-08-02 15:21:26

對不起，也許過於簡化了我的答案，img標籤和.diary div在另一個div中重複可變次數，這是你的意思嗎？ – dyer926

jquery slideToggle打開所有div而不是隻需要的div

回答

相關問題