当单击/展开一个节点时,需要所有其他折叠元素来折叠

时间:2019-12-19 17:43:36

标签: jquery html bootstrap-4

我的屏幕上有两个导航标题,我的要求是展开一个标题并选择其子元素直到最后。该部分具有多个子元素,所有其他子元素和第一个导航标题部分必须折叠到其标题,以便用户只能看到其当前部分展开。我尝试使用jQuery来实现这一点,但是它不起作用。请查看我的代码,进一步为我提供帮助。

如果单击任何子项,则同一标题部分中的其他子项元素必须折叠。我已经尝试过使用jQuery代码,但是它不起作用

h4中的两个元素是标题。现在,一开始两个都必须折叠,用户将从标签中选择一个标头,然后在其中,所有其他子元素在一个节点上工作时必须折叠。请帮助我。

<div class="col-md-8 accordion" id="ConfigureCarriersAndDocuments">
<div id="AccordionParent" class="panel-group" data-parent="#ConfigureCarriersAndDocuments">
     <div class="col-md-12 panel-default">
        <div class="col-md-12 panel-heading">
          <h4 class="panel-title btn btn-link">
             <a class="LinkedObjects" id="GenericRegisteredDocumentsStatic" data-toggle="collapse" data-target="#DocumentResults" aria-expanded="false">
                                                Registered Carriers
              </a>
           </h4>
      <div id="DocumentResults" class="col-md-12 collapse" data-parent="#AccordionParent1">
           <div class="col-md-12">
           <div class="collapse">child1</div>
              <div>child1-1</div>
              <div>child1-2</div>
           <div class="collapse">child2</div>
              <div>child2-1</div>
              <div>child2-2</div> 
           <div class="collapse">child2</div>
              <div>child2-1</div>
              <div class="collapse">child2-2</div>
                  <div class="collapse">child2</div>           
        </div>
</div>
        </div>
</div>

<div id="AccordionParent1" class="panel-group" data-parent="#ConfigureCarriersAndDocuments">
      <div class="col-md-12 panel-default">
      <div class="col-md-12 panel-heading">
          <h4 class="panel-title btn btn-link">
           <a class="LinkedObjects" id="GenericRegisteredDocumentsStatic" data-toggle="collapse" data-target="#DocumentResults" aria-expanded="false">
               Registered Documents
           </a>
          </h4>
      <div id="DocumentResults" class="col-md-12 collapse" data-parent="#AccordionParent1">
      <div class="col-md-12">
           <div class="collapse">child1</div>
              <div>child1-1</div>
              <div>child1-2</div>
           <div class="collapse">child2</div>
              <div>child2-1</div>
              <div>child2-2</div> 
           <div class="collapse">child2</div>
              <div>child2-1</div>
              <div class="collapse">child2-2</div>
                  <div class="collapse">child2</div>           
        </div>
</div>
        </div>
</div>

jquery代码是:

$('div:not(#AccordionParent)').hide();  // hide everything that isn't #myDiv
$('#AccordionParent').appendTo('body');  // move #myDiv up to the body

0 个答案:

没有答案