0

I am Creating Table of Content dynamically.

Hierarchy levels:

  • Parent Div

    • Children Div

      • Grand Children Div

For this I am creating div 's dynamically.

Then I am assigning margin to those divs.

Parent Div :- No margin

Children Div :- margin-left :15px;

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

So I am able to create table of content dynamically.

Problem :

I created more than one parent divs and there sub divs as per hierarchy. But If I am applying click event on first parent div then that event also getting apply on other parent div why because I am adding click event on class.

In this click I am facing problem in slideToggle(). As I am using class so because of this it is getting applied on other also.

Example:

$('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'

In this div 'i' value is coming from database on with the help of AJAX GET.

So what changes should I do for slideToggle() : In this I just want to toggle only clicked parent div's childrens only?

Any hints / Suggestions please?

Reference Code: 

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

});
4

3 回答 3

2

如果我理解正确，slideToggle() 是所有父母 div 的点击事件吗？在函数中，您可以使用“this”变量。

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

请显示点击事件的代码？

于 2013-10-26T07:46:55.290 回答
2

尝试这个：

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

当 jQuery 调用您的单击处理程序时，它设置this为单击的项目，即.g元素，因此仅.find()通过使用应用于该项目的后代$(this).find(...

于 2013-10-26T07:58:43.673 回答
0

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

单击滑动切换 div 但先隐藏其他人 - jQuery

也感谢其他人。

于 2013-10-28T08:33:39.803 回答