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

回答

相关问题