文章/答案/技术大牛

发布

社区首页 >问答首页 >手风琴菜单jquery不工作

问手风琴菜单jquery不工作
EN

Stack Overflow用户

提问于 2015-05-13 10:36:00

回答 5查看 300关注 0票数 1

我想在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>

联署材料：

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

jquery-ui-accordion

jquery

回答 5

Stack Overflow用户

回答已采纳

发布于 2015-05-13 11:05:46

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

( 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/

票数 1

Stack Overflow用户

发布于 2015-05-13 10:48:39

代码中主要有两个问题

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/

票数 1

Stack Overflow用户

发布于 2015-05-13 10:44:37

我认为您最好使用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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30212326

复制

相似问题

问手风琴菜单jquery不工作
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问手风琴菜单jquery不工作EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问手风琴菜单jquery不工作
EN