可折叠列表 [英] Collapsible list

问题描述

默认情况下，我需要制作三级菜单，当用户点击级别3菜单时，它应该展开，如果它有级别3的元素。 示例 href =http://jsfiddle.net/Ed9nk/8/ =nofollow> http://jsfiddle.net/Ed9nk/8/

在上面提到的示例中，我希望默认折叠 Grand Child Menu / level 3菜单，并且在父菜单上单击时应该展开。

我尝试添加以下脚本，但无法使用。

  // Collapseble MEGA菜单
 // initMenu（）; 
 
函数initMenu（）{
 $（'。dropdown .has-panel div'）。hide（）; 
 $（'。dropdown .has-panel ul'）。hide（）; 
 $（'。dropdown .has-panel ul li a'）。click（
 
 function（）{
 $（'。dropdown .has-panel ul'）。 hide（'normal'）; 
 $（this）.next（）。slideToggle（'normal'）; 
}）; 
} 
  

我评论过 initMenu（）; <


解决方案

试试这个：

  $（'。dropdown .has-panel div'）。hide（）; 
 $（'。dropdown .has-panel ul'）。hide（）; 
 $（'。dropdown .has-panel'）。parent（）。click（function（）{
 $（ul，this）.toggle（slow）; 
 }）; 
  

看起来您正试图点击锚项，当它隐藏时，您需要单击.has面板本身。

更新： http://jsfiddle.net/Ed9nk / 18 /

I need to make level three menu collapsible by default and when user click on the level 3 menu it should expand if it has level 3 element.

Example http://jsfiddle.net/Ed9nk/8/

In above mentioned example i want Grand Child Menu/ level 3 menus to be collapsed by default and it should expand when one clicked on the parent menu.

I tried to add following script but is not working.

//Collapseble MEGA Menu
//initMenu();

function initMenu() {
    $('.dropdown .has-panel div').hide();
    $('.dropdown .has-panel ul').hide();
    $('.dropdown .has-panel ul li a').click(

function () {
    $('.dropdown .has-panel ul').hide('normal');
    $(this).next().slideToggle('normal');
});
}

I have commented the initMenu(); in the fiddle example as it breaks the formating.

解决方案

Try this:

 $('.dropdown .has-panel div').hide();
 $('.dropdown .has-panel ul').hide();
 $('.dropdown .has-panel').parent().click(function(){
        $("ul", this).toggle("slow");
    });

It looks like you are trying to click the anchor item, when it is hidden, so you need to click the .has-panel itself.

Updated : http://jsfiddle.net/Ed9nk/18/

这篇关于可折叠列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！