嵌套的Accordion JQuery

时间：2014-05-08 12:00:03

标签： jquery jquery-ui-accordion

我有一个简单的手风琴菜单，我只是从jsfiddle那里得到的。 我想把它嵌套。

点击jsfiddle

在jsfiddle无效的情况下发布代码：

  

HTML 

<div class="accordion-expand-holder">
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
</div>

<div id="accordion">
<h3>Section 1</h3>
<div>
    <p>Para 1</p>
</div>

<h3>Section 2</h3>
<div>
    <p>Para 2</p>
</div>

<h3>Section 3</h3>
<div>
    <p>Para 3</p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>

<h3>Section 4</h3>
<div>
    <p>para 4 - 1</p>
    <p>Para 4 - 2</p>
</div>
  

JQuery的：

$(function () {
$("#accordion").accordion({
    collapsible:true,
    active:false
});
var icons = $( "#accordion" ).accordion( "option", "icons" );
$('.open').click(function () {
    $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
        'aria-selected': 'true',
        'tabindex': '0'
    });
    $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
    $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
        'aria-expanded': 'true',
        'aria-hidden': 'false'
    }).show();
    $(this).attr("disabled","disabled");
    $('.close').removeAttr("disabled");
});
$('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
        'aria-selected': 'false',
        'tabindex': '-1'
    });
    $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
        'aria-expanded': 'false',
        'aria-hidden': 'true'
    }).hide();
    $(this).attr("disabled","disabled");
    $('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
    $('.open').removeAttr("disabled");
    $('.close').removeAttr("disabled");

});
});
  

CSS：

body {
font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size:65%;
}
.accordion-expand-holder {
margin:10px 0;
}
.accordion-expand-holder .open, .accordion-expand-holder .close {
margin:0 10px 0 0;
}

我想要嵌套这些菜单。 我是JQuery的新手，请保持温和。

3 个答案:

答案 0 :(得分：2)

只需将ID更改为类，然后嵌套它们，并确保在实例化手风琴时autoHeight:false。

在这里工作演示http://jsfiddle.net/hEApL/147/

答案 1 :(得分：0)

看到这个fiddel：http://jsfiddle.net/hEApL/148/ 

<div class="accordion-expand-holder">
    <button type="button" class="open">Expand all</button>
    <button type="button" class="close">Collapse all</button>
</div>

<div id="accordion">
     <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>

    <!-- inner accordian -->    
<div id="accordion1" >
     <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>


</div>
           <!-- inner accordian --> 

    </div>


</div>

你的js：

// Accordion - Expand All #01 
$(function () {
    $("#accordion").accordion({
        collapsible:true,
        active:false
    });
        $("#accordion1").accordion({
        collapsible:true,
        active:false
    });



    var icons = $( "#accordion" ).accordion( "option", "icons" );
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
            'aria-selected': 'true',
            'tabindex': '0'
        });
        $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
            'aria-expanded': 'true',
            'aria-hidden': 'false'
        }).show();
        $(this).attr("disabled","disabled");
        $('.close').removeAttr("disabled");
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
            'aria-selected': 'false',
            'tabindex': '-1'
        });
        $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
            'aria-expanded': 'false',
            'aria-hidden': 'true'
        }).hide();
        $(this).attr("disabled","disabled");
        $('.open').removeAttr("disabled");
    });
    $('.ui-accordion-header').click(function () {
        $('.open').removeAttr("disabled");
        $('.close').removeAttr("disabled");

    });
});

答案 2 :(得分：0)

此代码工作正常，嵌套的手风琴jquery

https://codepen.io/brenden/pen/Kwbpyj

以下示例 

$('.toggle').click(function(e) {
  	e.preventDefault();
  
    var $this = $(this);
  
    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});
@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* { box-sizing: border-box; font-family: 'Open Sans',sans-serif; font-weight: 300; }
a { text-decoration: none; color: inherit; }
body { width: 40%; min-width: 300px; max-width: 400px; margin: 1.5em auto; color: #333; }
ul { list-style: none; padding: 0; }
ul .inner { padding-left: 1em; overflow: hidden; display: none; }
ul li { margin: .5em 0; }
ul li a.toggle { width: 100%; display: block; background: rgba(0,0,0,0.78); color: #fefefe; padding: .75em; border-radius: 0.15em; transition: background .3s ease; }
ul li a.toggle:hover { background: rgba(0, 0, 0, 0.9); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Open Inner</a>
        <div class="inner">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
            blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
          </p>
        </div>
      </li>
      
      <li>
        <a href="#" class="toggle">Open Inner #2</a>
        <div class="inner">
          <p>
            Children will automatically close upon closing its parent.
          </p>
        </div>
      </li>
      
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle" href="javascript:void(0);">Item 4</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
              </p>
            </div>
          </li>
        </ul>
      </li>
      
      <li>Option 2</li>
      
      <li>Option 3</li>
    </ul>
  </li>
</ul>

相关问题
最新问题