嵌套手风琴 JQuery

Touhid K.

2014-05-08

11972

我有一个简单的 Accordion 菜单，仅从 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>

查询：

$(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 的新手，请温柔。

jquery , jquery-ui-accordion

Nested Accordion JQuery

原文答案

答案:

Mukesh Dabhi

2014-05-08 0 原文

看看这个小提琴： 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");

    });
});

Tejash Kumbhare

2018-02-08 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>

嵌套手风琴 JQuery

答案:

相关问题

标签