Question

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

parent1           
 child1
 child2
 child3
parent2
 child1
 child2

假设我点击了child1 So

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

我为什么要克隆？因为我希望父母应该在左侧。只有我正在移动到右侧的子元素。当您单击时，Accordion会提供可折叠和扩展功能。在我的情况下，我已将该功能添加到我的父母。每当用户点击父元素时，子元素将被扩展。如果再次单击父级，它将崩溃。

我的问题当我点击假设parent1以便它会扩展但在我克隆父级的右侧时，它也会扩展。此外，如果我在左侧折叠我的父母，它将影响右侧父母。所以我想区分左手边和右手边的父母。但问题是手风琴只提供活动课程。所以任何人都可以给我一些指导如何解决这个问题

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

管理父切换案例

1 个答案: