手风琴菜单 jquery 不起作用

Question

我正在尝试在 jquery、

中实现手风琴菜单

但是它似乎不起作用，我的子菜单也没有出现。 ..

我已经通过更改我的 jquery 尝试了各种可能性，但无能为力:(,

任何帮助都会很棒！！

我在下面附上我的代码：

html:

 <div class="content-left">
    <ul id="accordion" class="level-1">

        <li><a href="#" class="ext1"><span class="icons1"><small>ELECTRICAL</small></span></a>
            <ul id="sub-menu" class="level-2 drop1 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>


            </ul>
        </li>

        <li><a href="#" class="ext2"><span class="icons2"><small>HOME & GARDEN</small></span></a>
            <ul id="sub-menu" class="level-2 drop2 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext3"><span class="icons3"><small>PETS AND LIVESTOCK</small></span></a>
            <ul id="sub-menu" class="level-2 drop3 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext4"><span class="icons4"><small>PROPERTY</small></span></a>
            <ul id="sub-menu" class="level-2 drop4 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext5"><span class="icons5"><small>BUSINESS AND LOANS </small></span></a>
            <ul id="sub-menu" class="level-2 drop5 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

       </div>

Jquery:

 <script type="text/javascript">

    ( function( $ ) {
$( document ).ready(function() {
$('#content-left ul#accordion.level-1').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('level-2')) {
            element.removeClass('level-2');
            element.find('li').removeClass('level-2');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('level-2');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('level-2');
            element.siblings('li').find('li').removeClass('level-2');
            element.siblings('li').find('ul').slideUp();
        }
    });
});
} )( jQuery );
    </script>

CSS:

 #accordion ul.level-2, #accordion ul.level-3 {
        display: none;
    }

    #accordion ul.active {
        display: block;
    }

或 JSFIDDLE：https://jsfiddle.net/8x7rjhz9/1/

感谢您抽出宝贵时间提出建议！

---编辑---

我如何做到三个级别并让点击项目列表保持活跃？

3 个级别：

   <div class="content-left">
    <ul id="accordion" class="level-1">

        <li><a href="#" class="ext1"><span class="icons1"><small>ELECTRICAL</small></span></a>
            <ul id="sub-menu" class="level-2 drop1 pt10">
<li>test</li>
<ul id="sub-menu" class="level-3 drop11">
    <li><a href="#">sub sub</a></li>
    <li><a href="#">sub sub</a></li>
    <li><a href="#">sub sub</a></li>
</ul>
<li>test</li>
<li>test</li>
<li>test</li>


            </ul>
        </li>

        <li><a href="#" class="ext2"><span class="icons2"><small>HOME & GARDEN</small></span></a>
            <ul id="sub-menu" class="level-2 drop2 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext3"><span class="icons3"><small>PETS AND LIVESTOCK</small></span></a>
            <ul id="sub-menu" class="level-2 drop3 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext4"><span class="icons4"><small>PROPERTY</small></span></a>
            <ul id="sub-menu" class="level-2 drop4 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext5"><span class="icons5"><small>BUSINESS AND LOANS </small></span></a>
            <ul id="sub-menu" class="level-2 drop5 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

       </div>

JS:

<script type="text/javascript">
    ( function( $ ) {
$( document ).ready(function() {
$('ul#accordion.level-1 li').on('click', function(){

        var element = $(this);
        if (element.hasClass('level-2')) {
            element.removeClass('level-2');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('level-2');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('level-2');
        }
    });
});
} )( jQuery );

新 JSFIDDLE：https://jsfiddle.net/430az1j4/5/

</script>

--- 编辑 3 PHP ----

我用 php 这样称呼我的第三级类别：

<?
$cats = array();

foreach (AdCategory::getList(array('filter' => array('parent_id' => null))) as $category){

    $subcats = AdCategory::getList(array('filter' => array('parent_id' => $category->id, 'ha' => 1)));

    if($category->exclude == 0){
        $cats[$category->name] = '';
        //$cats["main_path"] = $category->path_url_static;

        $this_cat = array_chunk($subcats, 10);

        foreach($this_cat as $chunk) {
            foreach($chunk as $subcat) { 

                if (strcmp($subcat->name , "Sub cat 1") == 0) {
                    $cats[$category->name] .= '<li><a href="'.$subcat->path_url.'">'.$subcat->name.'</a>';
                    $cats[$category->name] .= '<ul id="sub-menu" class="level-3 drop11">
                    <li><a href="/path">sub sub</a></li>
                    <li><a href="/path">sub sub</a></li>
                    <li><a href="/path">sub sub</a></li>
                    <li class="pad_last"><a href="/path">Other</a></li>
                    </ul>
                    </li>'; 

                } else if (strcmp($subcat->name , "sub cat 2") == 0) {
                    $cats[$category->name] .= '<li><a href="'.$subcat->path_url.'">'.$subcat->name.'</a>';
                    $cats[$category->name] .= '<ul id="sub-menu" class="level-3 drop11">
                    <li><a href="/path">sub sub</a></li>
                    <li><a href="/path">sub sub</a></li>
                    <li><a href="/path">sub sub</a></li>
                    <li class="pad_last"><a href="path">Other</a></li></ul></li>';
                } 

                else {
                    $cats[$category->name] .= '<li><a href="'.$subcat->path_url.'">'.$subcat->name.'</a></li>'; 
                }

            }

        }
    }
    if (array_key_exists($category->name, $cats))
       $cats[$category->name] .= '<div class="clear"></div>';

}

?>

事实上 - html 中没有 - 它为两个第一级构建这种方式：

<div class="content-left">
    <ul id="accordion" class="level-1">

        <li><a href="#" class="ext1"><span class="icons1"><small>main 1</small></span></a>
            <ul id="sub-menu" class="level-2 drop1 pt10">
                 <?=$cats['catname1']?>
            </ul>
        </li>

        <li><a href="#" class="ext2"><span class="icons2"><small>main 2</small></span></a>
            <ul id="sub-menu" class="level-2 drop2 pt10">
                <?=$cats['catname2']?>
            </ul>
        </li>

        <li><a href="#" class="ext3"><span class="icons3"><small>main 3 </small></span></a>
            <ul id="sub-menu" class="level-2 drop3 pt10">
                <?=$cats['catname3']?>
            </ul>
        </li>

        <li><a href="/property" class="ext4"><span class="icons4"><small>main 4</small></span></a>
            <ul id="sub-menu" class="level-2 drop4 pt10">
               <?=$cats['catname4']?>
            </ul>
        </li>

    </ul>

Answer 1

我认为你最好使用 jQuery UI 的手风琴模块：

将脚本标签包含到 jQuery UI:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

使用这种格式的 HTML 代码：

<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>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </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>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

像这样附加脚本：

(function($) {
    $( "#accordion" ).accordion();
})(jQuery);

查看此页面了解更多信息： https://jqueryui.com/accordion/

Answer 2

尝试以下代码或访问 https://jqueryui.com/accordion/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
 
<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>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </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>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>
 
 
</body>
</html>

Answer 3

你可以试试

jQuery(function ($) {
    $('#accordion.level-1 li:has(.sub-menu) > a').on('click', function () {
        var $li = $(this).closest('li');
        if ($li.hasClass('active')) {
            $li.find('.sub-menu').stop().slideUp();
            $li.find('li.active').removeClass('active');
        } else {
            $li.children('.sub-menu').stop().slideDown();
            $('#accordion li.active').removeClass('active').children('.sub-menu').stop().slideUp();
        }
        $li.toggleClass('active')
    });
});

演示：Fiddle

另请注意，由于元素的 ID 必须是唯一的，我已将 sub-menu 更改为 class。

Answer 4

你的代码主要有两个问题

1) 选择器 2) 没有使用过 preventDefault() 函数

我已经更新了代码检查这个

    <div class="content-left">
    <ul id="accordion" class="level-1">

        <li><a href="#" class="ext1"><span class="icons1"><small>ELECTRICAL</small></span></a>
            <ul id="sub-menu" class="level-2 drop1 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>


            </ul>
        </li>

        <li><a href="#" class="ext2"><span class="icons2"><small>HOME & GARDEN</small></span></a>
            <ul id="sub-menu" class="level-2 drop2 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext3"><span class="icons3"><small>PETS AND LIVESTOCK</small></span></a>
            <ul id="sub-menu" class="level-2 drop3 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext4"><span class="icons4"><small>PROPERTY</small></span></a>
            <ul id="sub-menu" class="level-2 drop4 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

        <li><a href="#" class="ext5"><span class="icons5"><small>BUSINESS AND LOANS </small></span></a>
            <ul id="sub-menu" class="level-2 drop5 pt10">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>            </ul>
        </li>

       </div>


( function( $ ) {
$( document ).ready(function() {
$('#accordion.level-1 a').on('click', function(e){
        e.preventDefault();
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('level-2')) {
            element.removeClass('level-2');
            element.find('li').removeClass('level-2');
            element.find('ul').slideDown();
        }
        else {
            element.addClass('level-2');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('level-2');
            element.siblings('li').find('li').removeClass('level-2');
            element.siblings('li').find('ul').slideDown();
        }
    });
});
} )( jQuery );

https://jsfiddle.net/8x7rjhz9/2/

Answer 5

通过在脚本中编辑几行，可以实现手风琴效果

( function( $ ) {
$( document ).ready(function() {
$('ul#accordion.level-1 li').on('click', function(){

        var element = $(this);
        if (element.hasClass('level-2')) {
            element.removeClass('level-2');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('level-2');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('level-2');
        }
    });
});
} )( jQuery );

JS fiddle link : https://jsfiddle.net/430az1j4/4/

手风琴菜单 jquery 不起作用

Accordion menu jquery doesn't work

jquery

menu

jquery-ui-accordion