使用jQuery或CSS在特定位置将链接的ul列表拆分为单独的列

Splitting a ul list of links into a seperate column at a specific point using jQuery or CSS

本文关键字：列表 ul 拆分 单独 链接 CSS jQuery 位置 定位 使用      更新时间：2023-09-26

我目前有一个按钮，其中有一个相当大的链接列表，全部在多个下拉配置中。例如:

<ul id="nav">
<li><a href="">Items</a>
  <ul>
    <li class="nav-divider">Equipment</li>
    <li><a href="#">Weapons &raquo;</a>
      <ul>
        <li class="nav-divider">One-Handed</li>
        <li><a href="#">Axe</a></li>
        <li><a href="#">Hammer</a></li>
        <li><a href="#">Wand</a></li>
        <li><a href="#">Sword</a></li>
        <li><a href="#">Dagger</a></li>
        <li class="nav-divider">Two-Handed</li>
        <li><a href="#">Axe</a></li>
        <li><a href="#">Hammer</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Sword</a></li>
        <!-- Would need to split the list here to a separate column -->
        <li class="nav-divider">Ranged</li>
        <li><a href="#">Bow</a></li>
        <li><a href="#">Crossbow</a></li>
        <li><a href="#">Ammunition</a></li>
        <li><a href="#">Arrows</a></li>
        <li><a href="#">Projectiles</a></li>
      </ul>
    </li>
    <li><a href="#">Armor &raquo;</a>
      <ul>
        <li class="nav-divider">Type</li>
        <li><a href="#">Plate &raquo;</a>
          <ul>
            <li><a href="#">Head</a></li>
            ... (a few more, no multiple columns needed)
            <li><a href="#">Shoulders</a></li>
          </ul>
        </li>
        <li><a href="#">Chain &raquo;</a>
          <ul>
            <li><a href="#">Head</a></li>
            ...
            <li><a href="#">Shoulders</a></li>
          </ul>
        </li>
        <li class="nav-divider">Other</li>
        <li><a href="#">Accessories &raquo;</a>
          <ul>
            <li><a href="#">Earrings</a></li>
            <li><a href="#">Rings</a></li>
            <li><a href="#">Necklaces</a></li>
          </ul>
        </li>
        <li><a href="#">Off Hand &raquo;</a>
          <ul>
            <li><a href="#">Shields</a></li>
            <li><a href="#">Talismans</a></li>
          </ul>
        </li>
        <li><a href="#">Back</a></li>
        <li><a href="#">Amulets</a></li>
      </ul>
    </li>   
  </ul>
</li>
</ul>

有些列表很好，但是"Items -> Weapons"下的链接列表太长，导致页面在一些较低的显示分辨率下稍微向下伸展。我想将该列表拆分为两列，以便' range '分隔符/标题出现在其自己的列中(我已经指示了拆分应该在代码中使用注释发生的位置)。

我认为我需要某种Javascript来完成这一点，但到目前为止，我一直在尝试不同的代码和不同的方法来实现这一点，但没有成功。有些解决方案将所有列表均匀地分成两列(通过在css中使用column-count)(不希望那样)，有些将列分开，但第二个没有任何格式(我不知道为什么)。

我已经把我所拥有的HTML和CSS3放入一个提琴中，您可以在这里查看:http://jsfiddle.net/MSmj9/2/

你可以从上面的注释中看到，我在css中尝试了一些东西，但没有成功。

非常感谢您提供的任何帮助或指导。

问好。

把<ul>分成两半怎么样?看看这个(非常简化的)小提琴:http://jsfiddle.net/U9CFE/

这是一种CSS模板，只有你的问题区域和一些通用的类名:

.sub, .sub-sub {
    display:none;
}
li.parent:hover > .sub {
    display: block;
}
li.weapons-parent {
    position: relative;
}
.sub-sub {
    position: absolute;
    border: 1px solid red;
}
.sub-sub:last-child {
    left: 199px;
}
.weapons-parent:hover > .sub-sub {
    display: inline-block;
}

要做到这一点，您需要将列表项拆分为两个列表。您可以在服务器端或客户端执行此操作。

对于服务器端，只需创建远程武器的额外列表，对于客户端，您可以做类似的事情(jQuery示例，可以通过在列表项上创建额外的类来简化)http://jsfiddle.net/5hJLv/4/

$(function(){
var dividers = $('#nav .level3 .nav-divider');        
if (dividers.length > 2) {
    var lastIndex = $(dividers.get(2)).index() - 1;          
    var extraColumn = $('#nav .level3 > li:gt(' + lastIndex + ')'); 
    var parent = $('#nav .level3').first().parent('li');
    var extra = $('<ul class="level3 inserted"></ul>').append(col2.clone());        
    parent.append(extra);
    //extra;
    col2.remove();
}

});

相关文章：