Question

我有五个不同的“ul”宽度嵌套“ul”“li”，我想打开当前的“ul”及其嵌套的“ul”“li”。下面的图片将让您了解我想要的确切内容。

这是我的剧本......

<script>
   $(function() {
    $('li.parent').on('click', function () {
           var $menuItem = $(this),
            $submenuWrapper = $('> .wrapper1', $menuItem);
           var menuItemPos = $menuItem.position();
           $submenuWrapper.css({
               top: menuItemPos.top,
               left: menuItemPos.left + Math.round($menuItem.outerWidth() * 1.1)
           });
           $('.wrapper1 .wrapper1').hide()
           $(this).find('.wrapper1 ').show();
           $(this).find('li').css({ 'visibility': 'visible', 'height': '22px' });
       });
       $(".wrapper1:first-child").click(function () {
           $(this).next(" .wrapper1:first-child").click();
           $(this).find('li:first-child').css({ 'visibility': 'visible', 'height': '22px' });
       });
    });

</script>

css文件......

.wrapper1 {
position: relative;
}
.wrapper1 >li:first-child
{
diaplay:block;
height:25px;
}
.wrapper1 ul {
width: 200px;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
left: -1px;
top: 23px;
background: #fff;
border: 1px solid #b1bbc4;
width: 220px;
height: auto;
z-index: 300;
}
.wrapper1 li {
position: static;
width:100%;
}
.wrapper1 li a{
color:#000;
display: block;
height: 25px;
line-height: 26px;
color: #000;
text-decoration: none;
background: url(../ImagesNew/leftpanel/folder.png) no-repeat 5px;
padding-left: 28px;
}
li .wrapper1 {
position: absolute;
z-index: 10;
display: none;
}
.wrapper1 li ul {
margin: 0;
}
li .wrapper1 li {
background:#fff;
}
li .wrapper1 li a{
background:  url(../ImagesMonoBlue/general/i-survey.gif) no-repeat 2px 6px;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li .wrapper1 li a:hover{
background:  #cfd8dc url(../ImagesMonoBlue/general/i-survey.gif) no-repeat 2px 6px;
}

Html代码.....

<!--first portion of ul-->
<div class="wrapper1">
  <ul>
  <li>Select survey--</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li class="parent">Mno >
      <div class="wrapper1">
        <ul>
          <li>Jkl</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Pqr</li>
  </ul>
</div>
<!--first portion of ul ends here-->

<!--second portion of ul-->
<div class="wrapper1">
  <ul>
 <li>Select survey--</li>
    <li>Abc</li>
    <li>Def</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li class="parent">Mno >
      <div class="wrapper1">
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
          <li>Xyz</li>
          <li>Pqr</li>
          <li>Stu</li>
          <li>Vw</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Pqr</li>
    <li>Stu</li>
    <li>Vw</li>
    <li>Xyz</li>
    <li class="parent">Abc >
      <div class="wrapper1">
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
          <li>Mno</li>
          <li>Pqr</li>
          <li>Stu</li>
          <li>Vw</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Def</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li>Mno</li>
    <li>Pqr</li>
    <li>Stu</li>
    <li>Vw</li>
    <li>Xyz</li>
  </ul>
</div>
<!--second portion of ul ends here-->

以上代码只是一个演示版，具有不同的值。我在下面的图片代码中使用相同的演示。

如何打开和关闭一个下拉列表

0 个答案: