管理 parent 切换案例

Question

我使用手风琴构建了一个结构 parent 和 child。我的观点结构如下所示。当我点击任何 child 所以我克隆 parent，然后将 child 元素移到右侧。

parent1           
 child1
 child2
 child3
parent2
 child1
 child2

假设我点击 child1 那么

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

我为什么要克隆？因为我希望 parent 应该在 left-hand 一侧。我只将 child 元素移动到 right-hand 一侧。单击时，手风琴提供可折叠和展开功能。就我而言，我已将该功能添加到我的 parent。每当用户单击 parent 时，child 元素就会展开。如果再次单击 parent 它将崩溃。

我的问题是 当我点击假设 parent1 时它会展开但是在 right-hand 我正在克隆 parent，它也会得到 expand 。此外，如果我在 left-hand 侧折叠我的 parent，它会影响 right-hand 侧 parent。所以我想区分left-hand边和right-hand边parent。但问题是 accordion 只提供 active class 而已。那么谁能给我一些解决这个问题的方向

<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
    },
  });

现在您只需要在父级

上添加和删除一个class

$( 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')
    }
  });

管理 parent 切换案例

Manage the parent toggle case

javascript

jquery

accordion

zurb-foundation