如何将无序列表分成两部分

How to apart unordered list into 2 parts?

本文关键字：两部分 列表 无序      更新时间：2023-09-26

我有无序列表，我想在特定屏幕尺寸上分成 2 个部分，我尝试遵循 jQuery。

HTML 是：

<ul class="menu-primary">
   <li class="menu-item">home</li>
   <li class="menu-item">Products</li>
   <li class="menu-item">Settings</li>
   <li class="menu-item">Contact</li>
   <li class="right search">
      <form class="searchform search-form">
         <input type="text">
      </form>
   </li>
</ul>

当视口小于 800px 时，我想将这个无序列表分成两部分，就像这样

<ul class="menu-primary">
   <li class="menu-item">home</li>
   <li class="menu-item">Products</li>
   <li class="menu-item">Settings</li>
   <li class="menu-item">Contact</li>
</ul>
<ul class="searchform-block">
   <li class="right search">
      <form class="searchform search-form">
         <input type="text">
      </form>
   </li>
</ul>

所以我尝试了以下jQuery来这样做，但是存在一些问题。

j查询：

(function($){
    function viewport() {
        var e = window, 
            a = 'inner';
        if (!('innerWidth' in window )) {
            a = 'client';
            e = document.documentElement || document.body;
        }
        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
    }
    /**
     * Responsive Navigation
     */
    if ( viewport().width < '800' ) {
        $( '.menu-primary li' ).each(function(i){
            if ( $(this).hasClass('search') ) {
                $(this).before('</ul><ul class="searchform-block">');
            }
        });
    }
})(jQuery);

但是上面的jQuery的结果是完全出乎意料的。

<ul class="menu-primary">
   ...
   <li class="menu-item">Contact</li>
   <ul class="searchform-block"></ul>
   <li class="right search">
      <form class="searchform search-form">
         <input type="text">
      </form>
   </li>
</ul>

注意：我也使用superfish.min.js作为菜单。

你正在做的事情是不正确的，因为jQuery试图纠正before函数中的html。你应该做的是在 ul.menu-primary 之后创建 ul tag 元素，并将 li.search 移动到第二个无序列表。喜欢这个：

var tmpLiEl=null;
$( '.menu-primary li' ).each(function(i){
    if ( $(this).hasClass('search') ) {
        tmpLiEl=$(this).detach();
    }
});
$('.menu-primary').after('<ul class="searchform-block"></ul>');
tmpLiEl.appendTo('.searchform-block');
相关文章：