javascript - 管理父切换案例

Question

我使用 Accordion 构建了一个父子结构。我的观点结构如下所示。当我点击任何 child 所以我克隆父元素，然后将子元素移动到右侧。

parent1           
 child1
 child2
 child3
parent2
 child1
 child2

假设我点击child1那么

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

我为什么要克隆？因为我希望 parent 应该在左边。只有我移动到右侧的子元素。单击时， Accordion 提供可折叠和展开功能。就我而言，我已将该功能添加到我的 parent 。每当用户单击父元素时，子元素就会展开。如果再次单击父级，它将崩溃。

我的问题是，当我点击 suppose parent1 时它会得到 expand 但在我克隆父对象的右侧，它也会得到 expand 。另外，如果我在左侧折叠我的 parent ，它会影响右侧的 parent 。所以我想区分左侧和右侧父级。但问题是 Accordion 只提供事件课。那么谁能给我一些解决这个问题的方向

<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>

Answer 1

您可以覆盖 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')
    }
  });