嵌套< li>不在幻灯片上工作 [英] Nested <li> not working on slide

问题描述

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

 < div>< button id =showmenutype =button>显示菜单< /按钮>< / div> 
< div class =sidebarmenustyle =display：none;> 
< ul id =sidebarmenu1> 
< li>< a href =＃>圈子列表< / a> 
< ul> 
< li>< a href =addCircle.jsp>添加< / a>< / li> 
< li>< a href =EditDiv.jsp>编辑< / a>< / li> 
< li>< a href =deletediv.jsp>删除< / a>< / li> 
< li>< a href =adddivision.jsp>查看全部< / 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; 
字体：粗体12px verdana; 
 width：180px; / *主菜单项目宽度* / 
 border-bottom：1px solid #ccc; 
} 
 
 .sidebarmenu ul li {
 position：relative; 
} 
 
 / *顶级菜单链接样式* / 
 .sidebarmenu ul li a {
 display：block; 
溢出：auto; / *在IE7中强制hasLayout * / 
颜色：黑色; 
 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 / *选项卡的背景（默认状态）* / 
} 
 
 .sidebarmenu ul li a：visited {
 color：black; 
} 
 
 .sidebarmenu ul li a：hover {
 background-color：＃e8e8e8; 
} 
 
 / *子级菜单项* / 
 .sidebarmenu ul li ul {
 position：absolute; 
 width：89px; / *子菜单项宽度* / 
 
 top：0; 
可见性：隐藏; 
} 
 
 .sidebarmenu a.subfolderstyle {
背景：url（../ images / right.PNG）不重复97％50％; 
} 
 
 / * Holly Hack for IE \ * / 
 * html .sidebarmenu ul li {
 float：left; 
身高：1％; 
} 
 
 * html .sidebarmenu ul li a {
 height：1％; 
 
 $ / code> 

这是我的JS：



 < script type =text / javascript> 
 //嵌套的侧栏菜单（2009年3月20日）
 //通过动态驱动器：http://www.dynamicdrive.com/style/ 
 
 var menuids = [ sidebarmenu1] //输入每个Side Bar菜单的主UL的id（s），用逗号分隔
 
函数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]）//如果这是第一级子菜单
 ultags [t] .style.left = ultags [t] .parentNode.offsetWidth 
 +px//将第一级子菜单动态定位到是主菜单项的宽度
 else 
 //否则如果这是一个子级子菜单（ul）
 ultags [t] .style.left = ultags [t  -  1] 
 .getElementsByTagName（a）[0] .offsetWidth 
 +px//启动它的菜单项右侧的位置菜单
 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。长度 -  1; t> -1; t  - ）{//再次遍历所有子菜单，并使用display：none来隐藏菜单（以防止可能的页面滚动条
 ultags [t] .style.visibility =visible
如果（window.addEventListener）
 window.addEventListener（ultags [t] .style.display =none
} 
} 
} 
 
加载，initsidebarmenu，false）
 else if（window.attachEvent）
 window.attachEvent（onload，initsidebarmenu）
< / script> 
  

注意：我只发布了HTML的一部分，列表中有更多项目，当没有幻灯片时，完整的子列表显示正常功能已应用。

解决方案

第一个列表项内的列表消失了，因为您拥有 visibility：hidden ; 就可以了，如果你删除了这个部分 - 当你设置 top：时，它将显示在上面的父列表项中。 c $ c> property，我将它改为100％ - 这就是我所得到的这是你想要的吗？ - http://jsfiddle.net/skip405/8nbe4/1/

编辑：

由于您的html上没有任何类，在小提琴中，可以并应该重构。考虑改变你的HTML和CSS来包含一些类。
代码的工作示例在这里 - http://jsfiddle.net/skip405/8nbe4 / 2 /

I have this code. I applied a hide/show functionality on button click. It works great but only the first value of the sub-list shows. Didn't know what broke. Can some one help me?

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

This is my jQuery

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

This is my 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%;
}

This is my 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>

Note: I posted only a part of HTML. There are more items in my list and the complete sub-list appears fine when there is no slide functionality applied.

解决方案

The list inside the first list item disappears because you've got visibility: hidden; on it. If you delete that part - it will be shown above the parent list item as you set the top: 0; property. I changed it to 100% - and that's what I got. Is this what you want? -http://jsfiddle.net/skip405/8nbe4/1/

EDIT:

Since you don't have any classes on your html, the script, provided in the fiddle, can and should be refactored. Consider changing your html and css to include some classes. The working example of the code is here - http://jsfiddle.net/skip405/8nbe4/2/

这篇关于嵌套< li>不在幻灯片上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！