Question

我正在动态创建目录。

层次结构级别：

Parent Div
- 儿童分组
  - Grand Children Div

为此我动态创建div。

然后我为这些div分配保证金。

父级：无利润

儿童分组： - margin-left :15px;

Grand Children Div： - margin-left :35px;

所以我能够动态创建目录。

问题：

我创建了多个父div，并根据层次结构创建了子div。但是如果我在第一个父div上应用click事件，那么该事件也会在其他父div上应用，因为我在课堂上添加了click事件。

在此次点击中，我遇到slideToggle().中的问题因为我正在使用类，因此它也被应用于其他类。

示例：

$('main_div').haml(['%div.g', {id:'g_' + i', name: i}, Parent Div]);//class = 'g'

$('main_div').haml(['%div.g1', {id:'g_' + i, name: i, style:'**margin-left: 15px**;'}, Children Div]);//class = 'g1'

$('main_div').haml(['%div.g2', {id:'g_' + i, name: i, style:'**margin-left: 35px**;'}, Grand Children Div]);//class = 'g2'

在这个div 'i'值来自AJAX GET帮助下的数据库。

那么我应该对slideToggle()做些什么改变：在这里我只想切换只点击父div的子女？

有任何提示/建议吗？

参考代码：

$('#main_div').on('click','.g', function(){
  $('#main_div').find('.g1,.g2').slideToggle();

});

Answer 1

如果我理解正确，slideToggle（）是所有父母div的点击事件？在功能上你可以使用'this'变量。

$(this).find(...some selector for child divs...').slide..

请显示点击事件的代码？

Answer 2

试试这个：

$('#main_div').on('click','.g', function(){
   $(this).find('.g1,.g2').slideToggle();
});

当jQuery调用你的点击处理程序时，它会将this设置为被点击的项目，即.g元素，因此只能使用{{1}将.find()应用于该项目的后代。 }

Answer 3

以下参考链接解决了我的问题。

On click slidetoggle div but hide others first - jQuery

也感谢其他人。

如何根据类和名称属性切换动态创建的div？

3 个答案: