嵌套 <li> 不适用于幻灯片

Question

我有这个代码。我在按钮单击时应用了隐藏/显示功能。它工作得很好，但只显示子列表的第一个值。不知道什么破了。有人可以帮我吗？

<div ><button id="showmenu" type="button">Show menu</button></div>
   <div class="sidebarmenu" style="display: none;">
    <ul id="sidebarmenu1">
      <li><a href="#" >Circle List</a>
        <ul>
          <li><a href="addCircle.jsp">Add</a></li>
          <li><a href="EditDiv.jsp">Edit</a></li>
          <li><a href="deletediv.jsp">Delete</a></li>
          <li><a href="adddivision.jsp">View All</a></li>
         </ul>
       </li>
    </ul>       
   </div>
</div>

这是我的 jQuery

$(document).ready(function() {
$('#showmenu').click(function() {
    $('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
    $('.sidebarmenu').toggle("slide");
});
});

这是我的 CSS

.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
 }

 .sidebarmenu ul li {
position: relative;
 }

/* Top level menu links style */
.sidebarmenu ul li a {
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 6px;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-right: 1px solid #bbb;
}

.sidebarmenu ul li a:link,.sidebarmenu ul li a:visited,.sidebarmenu ul li a:active
{
background-color: #d2d2d2 /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited {
color: black;
}

.sidebarmenu ul li a:hover {
background-color: #e8e8e8;
}

/*Sub level menu items */
.sidebarmenu ul li ul {
position: absolute;
width: 89px; /*Sub Menu Items width */

top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
  background: url(../images/right.PNG) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li {
float: left;
height: 1%;
}

* html .sidebarmenu ul li a {
height: 1%;
}

这是我的 JS：

<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids = [ "sidebarmenu1" ] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu() {
    for ( var i = 0; i < menuids.length; i++) {
        var ultags = document.getElementById(menuids[i])
                .getElementsByTagName("ul")
        for ( var t = 0; t < ultags.length; t++) {
            ultags[t].parentNode.getElementsByTagName("a")[0].className += " subfolderstyle"
            if (ultags[t].parentNode.parentNode.id == menuids[i]) //if this is a first level submenu
                ultags[t].style.left = ultags[t].parentNode.offsetWidth
                        + "px" //dynamically position first level submenus to be width of main menu item
            else
                //else if this is a sub level submenu (ul)
                ultags[t].style.left = ultags[t - 1]
                        .getElementsByTagName("a")[0].offsetWidth
                        + "px" //position menu to the right of menu item that activated it
            ultags[t].parentNode.onmouseover = function() {
                this.getElementsByTagName("ul")[0].style.display = "block"
            }
            ultags[t].parentNode.onmouseout = function() {
                this.getElementsByTagName("ul")[0].style.display = "none"
            }
        }
        for ( var t = ultags.length - 1; t > -1; t--) { //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
            ultags[t].style.visibility = "visible"
            ultags[t].style.display = "none"
        }
    }
}

if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)
</script>

注意：我只发布了 HTML 的一部分。我的列表中有更多项目，当没有应用幻灯片功能时，完整的子列表看起来很好。

Answer 1

第一个列表项中的列表消失了，因为上面有 visibility: hidden;。如果您删除该部分 - 当您设置 top: 0; 属性时，它将显示在父列表项的上方。我将其更改为 100% - 这就是我得到的。这是你想要的吗？ -http://jsfiddle.net/skip405/8nbe4/1/

编辑：

由于您的 html 上没有任何类，因此小提琴中提供的脚本可以而且应该被重构。考虑更改您的 html 和 css 以包含一些类。 代码的工作示例在这里 - http://jsfiddle.net/skip405/8nbe4/2/

Answer 2

您需要删除visibility:hidden 和top:0

检查这个Fiddle

$(document).ready(function() {
  $('#showmenu').click(function() {
   $('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
   $('.sidebarmenu').toggle("slide");
 });
});