Question

我正在尝试创建一个简单的嵌套列表，它将与图像类似。在图像主列表在左侧，如果有任何子列表，它将在鼠标右侧显示。{{0} }
我正在尝试的链接看起来像 -sample at jsfiddle you can see 这里我遇到的问题是 Q1如果您从列表中首先悬停到第二个到第三个，则子列表不易导航，整个列表将消失。行为不一致可能是因为设计。

Q2。在我必须集成它的主页面中，它一直压低它下面的所有元素我该如何处理它。

Q3。现在，列表显示为正常的嵌套列表，任何有关制作/显示的帮助，如附加图像中所示作为参考，我也把代码放在这里。

<ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;">
  <li><span><em>List</em></span>
      <ul id="liststart" style="display: none;position:absolute;padding:2px 2px 10px 2px;top:20px;left:190px;text-align:justify" class="search-menu">
        <li> <a>First</a>
            <ul >
                <li><a>1.1</a></li>
                <li><a>1.2</a></li>
            </ul>
        </li>
        <li> Second
            <ul >
                <li><a>2.1</a></li>
                <li>2.2</li>
            </ul>
        </li>
        <li> Third
            <ul >
                <li>3.1</li>
                <li>3.2</li>
            </ul>
        </li>
      </ul>
   </li>
</ul>

Javscript ：

jQuery('#ScatList').hover(function() {
    jQuery('#liststart').show(400);
}, function() {
    jQuery('#liststart').hide();
});
jQuery('#liststart >li').hover(function() {
    jQuery(this).find('ul').show(400);
}, function() {
    jQuery(this).find('ul').hide();
});
jQuery('#liststart >li> ul').hide();

Answer 1

您可能会发现我的minimalistic navigation plugin对此有用。您可以自由使用代码并根据自己的喜好进行更改。

制作简单的嵌套列表，其中子列表显示在主列表的一侧

1 个答案: