将垂直滑块更改为水平

Question

我是 jquery 的新手，有一个垂直菜单需要处理。菜单的子菜单数量太多，打开时菜单变得太深； 所以我需要在点击时向左而不是向下滑出子菜单。 垂直菜单的jquery代码如下：

 jQuery(document).ready(function(){

 $(".goo-collapsible > li > a").on("click", function(e){

if(!$(this).hasClass("active")) {

  // hide any open menus and remove all other classes
    $(".goo-collapsible li ul").slideUp(350);
    $(".goo-collapsible li a").removeClass("active");

    // open our new menu and add the open class
    $(this).next("ul").slideDown(350);
    $(this).addClass("active");

}else if($(this).hasClass("active")) {

    $(this).removeClass("active");
    $(this).next("ul").slideUp(350);
  }
 });

});

我想用其他一些替代方法替换 slideUp() 和 slideDown() 函数，而无需编辑代码的其他部分。 我会非常感谢支持者:)

Answer 1

你可以参考下面的代码。 尝试设置正确的 CSS，但仍然存在一些错误，但功能正是您所需要的。

 $(".goo-collapsible > li > a").on("click", function(e){ if(!$(this).hasClass("active")) { // hide any open menus and remove all other classes //$(".goo-collapsible li ul").slideUp(350); $(".goo-collapsible li ul").hide(); $(".goo-collapsible li a").removeClass("active"); // open our new menu and add the open class //$(this).next("ul").slideDown(350); $(this).next("ul").show().animate({"left":"140px"}, "slow"); $(this).addClass("active"); }else if($(this).hasClass("active")) { $(this).removeClass("active"); //$(this).next("ul").slideUp(350); $(this).next("ul").animate({"left":"0px"}, "slow",function(){$(this).hide();}); } });

 .goo-collapsible{ width:120px; border: solid 1px black; } .goo-collapsible > li { background:cyan; z-index:10; opacity:1; } .goo-collapsible > li > a { padding: 6px 9.5px; } ul, ol, li { list-style: outside none none; margin: 0; padding: 0; } .dropdown-menu{ display:none; left:0px; position: absolute; z-index:5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <ul class="goo-collapsible"> <li><a href="javascript:void(0);">Main Category</a> <ul class="dropdown-menu"> <li><a href="/SubCat1">Sub Cat 1</a></li> <li><a href="/SubCat1">Sub Cat 2</a></li> <li><a href="/SubCat1">Sub Cat 3</a></li> </ul> </li> <li> <a href="javascript:void(0);">About us</a> <ul class="dropdown-menu"> <li><a href="/about/history/">History</a></li> <li><a href="/about/team/">The team</a></li> <li><a href="/about/address/">Our address</a></li> </ul> </li> </ul>