李並不裏面UL

顯示我有菜單，裏面裏，還有另外一個UL，對UL顯示的李點擊時。但這個jQuery不工作。

$(document).ready(function() { 
    $("#side-nav .sub-menu").click(function() { 
    //slide up all the link lists 
    $("#side-nav ul ul").slideUp(); 
    //slide down the link list below the h3 clicked - only if its closed 
    if (!$(this).next().is(":visible")) { 
     $(this).next().slideDown(); 
    } 
    }) 
})

HTML

<div id="side-nav"> 
    <ul> 
    <li style="border-top: thin #eee solid;" class="sub-menu"> 
     <i class="fa fa-upload fa-lg"></i>Upload 
     <ul> 
     <li><a href="#">Link1</a> 
     </li> 
     <li><a href="#">Link2</a> 
     </li> 
     <li><a href="#">Link3</a> 
     </li> 
     </ul> 
    </li> 
    <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a> 
    </li> 

    </ul> 
</div>

CSS

#side-nav ul ul { 
display: none; 
    } 
    #side-nav li.active ul { 
display: block; 
    }

來源

2014-02-20 neel

我做了一個輕微的調整你的代碼，但其他東西使用的jsfiddle和你使用jQuery是包括jQuery框架庫時要記住。

$(document).ready(function() { 
$("#side-nav .sub-menu").click(function() { 
    // if secondary nav is not visible, slide down 
    if (!$('> ul', this).is(":visible")) { 
     $('> ul', this).slideDown(); 
    } else { // else, it is visible so slide up 
     $('> ul', this).slideUp(); 
    } 
}) 
})

來源

2014-02-20 05:44:58 partypete25

嘗試

<div id="side-nav"> 
    <ul> 
     <li style="border-top: thin #eee solid;" class="sub-menu"> 
      <!--Use a another wrapper element for the tirgger part--> 
      <span><i class="fa fa-upload fa-lg"></i>Upload</span> 
      <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
      </ul> 
     </li> 
     <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a></li> 
    </ul> 
</div>

然後

$(document).ready(function() { 
    $("#side-nav .sub-menu > span").click(function() { 
     //slide down the target 
     var $nxt = $(this).next().stop(true).slideDown(); 
     //slide up all other elements 
     $("#side-nav ul ul").not($nxt).stop(true).slideUp(); 
    }) 
})

演示：Fiddle

來源

2014-02-20 05:40:15

Johny：謝謝。但滑動不起作用 – neel

@Parvathiiiii而不是'.slideDown（）;'使用'.slideToggle（）;' - http://jsfiddle.net/arunpjohny/C4MMA/2/ –

只需更換

$("#side-nav ul ul").slideUp();

通過

$("#side-nav ul ul").slideToggle("slow");

這裏是demo

來源

2014-02-20 05:45:17 iJade

再次單擊李ul不是隱藏 – neel

@Parvathiiiii更新..有一個看看 – iJade

你試試這個jQuery的代碼 -

$(document).ready(function() { 
    $("#side-nav .sub-menu").click(function() { 
     $("#side-nav ul ul").toggle('slow'); 
     }) 
    })

來源

2014-02-20 05:50:32 Preet

回答

相關問題