Javascript 管理父切换案例

我用手风琴为父母和孩子搭建了一个结构。 我的观点结构如下。当我点击任何一个孩子 因此，我克隆父元素，然后将子元素移到右侧

parent1           
 child1
 child2
 child3
parent2
 child1
 child2

假设我点击child1，那么

Left-hand side                         Right Hand Side
parent1                                parent1                                                                        
                                        child1
 child2
 child3
parent2
 child1
 child2

我为什么要做克隆？因为我想父母应该在左手边。只有子元素我移动到右侧。 手风琴提供折叠和扩展功能，当您点击。在我的例子中，我已将该功能添加到我的家长。每当用户单击父元素时，子元素就会展开。如果再次单击父对象，它将崩溃

我的问题是当我单击“假设父对象1”时，它会被展开，但在我克隆父对象的右侧，它也会被展开。此外，如果我折叠左侧的父对象，将影响右侧的父对象。所以我想区分左侧和右侧。但事实上，手风琴只是提供了一个活跃的课堂。有谁能给我一些解决这个问题的方法吗

<dl id="available_fields_container" class="accordion list_container ui-sortable active" data-accordion="one">
  <dd class="accordion-navigation active" id="data_download_fields">
    <a href="#data_download_fields">
      <b>FootBall Fields</b>
      <span class="collapse-symbol"></span>
    </a>
    <span class="select-group" data-fields="#data_download_fields">Select all</span>
    <div id="data_download_fields" class="content active" data-group="FootBall Fields">

      <div class="field_items"  data-index="4" data-group="FootBall Fields">
        Andrew
        <span class="plus-icon action-icon">+</span>
        <i class="icon-cross2 action-icon"></i>
      </div>
      <div class="field_items"  data-index="5" data-group="FootBall Fields">
        Sam
        <span class="plus-icon action-icon">+</span>
        <i class="icon-cross2 action-icon"></i>
      </div>

    </div>
  </dd>

    <dd class="accordion-navigation " id="data_download_hockey_fields">
      <a href="#data_download_hockey_fields">
        <b>hockey Fields</b>
        <span class="collapse-symbol"></span>
      </a>
      <span class="select-group" data-fields="#data_download_hockey_fields">Select all</span>
      <div id="data_download_hockey_fields" class="content " data-group="hockey Fields">
          <div class="field_items"  data-index="0" data-group="hockey Fields">
  jason
    <span class="plus-icon action-icon">+</span>
    <i class="icon-cross2 action-icon"></i>
  </div>
  <div class="field_items"  data-index="1" data-group="hockey Fields">
  Jane
    <span class="plus-icon action-icon">+</span>
    <i class="icon-cross2 action-icon"></i>
  </div>

      </div>
    </dd>

</dl>

全选
安得烈
+
山姆
+
全选
杰森
+
简
+

您可以覆盖accordion提供的默认切换功能

$(document).foundation({
    accordion: {
      content_class: false,
      active_class: false
    },
  });

现在您只需要在父级上添加和删除一个类

$( document ).on('click','.field_items' , function() {
    if($(this).parent().hasClass('active')){
      $(this).parent().removeClass( "active" )
      $(this).parent().parent().removeClass("active")
    }
  });

  $( document ).on('click','#available_fields_container > dd.accordion-navigation' , function() {
    if($(this).hasClass("active")){
      $(this).removeClass( "active" )
      $(this).find('.content').removeClass('active')
    }else{
      $(this).addClass( "active")
      $(this).find('.content').addClass('active')
    }
  });

---

请在中分享一点您的示例。