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

您的代码中主要存在两个问题

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 2

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

( 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小提琴链接：https://jsfiddle.net/430az1j4/4/

Answer 3

我认为你最好不要使用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 4

尝试关注代码或访问https://jqueryui.com/accordion/

＆＃13;

<!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>

＆＃13;

Answer 5

你可以尝试

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更改为类。

手风琴菜单jquery不起作用

5 个答案: