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>';
JS
<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>
(基于提供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();
});
})
看完你的代码后,我可以看到第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>
请注意,我会让你的用法和样式目的的日记课,但它没有在任何地方使用。
对不起,也许过于简化了我的答案,img标签和.diary div在另一个div中重复可变次数,这是你的意思吗? – dyer926
请参阅更新以使用'parent()'。没有意识到他们是兄弟姐妹 –
感谢您的建议,但像所有其他我试图专注于一个div的例子,没有任何动作。我无法弄清楚怎么回事 – dyer926
我试过了。父()更新,仍然没有改变,有什么可以阻止这个工作? – dyer926