将垂直滑块更改为水平

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，但它仍然有一些错误，但功能是你正在寻找的。

＆＃13;

＆＃13;

$(".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();});
  }
 });

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;