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

我有一个无序的列表，我想在特定的屏幕大小上分成两部分，我试着遵循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来实现这一点，但是出现了一些问题

jQuery：

(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);

（函数（$）{
函数视口（）{
var e=窗口，
a=‘内部’；
如果（！（'innerWidth'在窗口中））{
a=‘客户’；
e=document.documentElement | | document.body；
}
返回{width:e[a+'width']，height:e[a+'height']}；
}
/**
*响应导航
*/
如果（视口（）.宽度<'800'）{
$（'.menu primary li'）。每个（功能（i）{
if（$（this）.hasClass（'search'））{
$（此）.before（“
”）；
}
});
}
})（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标记元素，并将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');

var tmpLiEl=null；
$（'.menu primary li'）。每个（功能（i）{
if（$（this）.hasClass（'search'））{
tmpLiEl=$（this.detach（）；
}
});
$（'.menu primary'）。在（'
'）之后；
tmpLiEl.appendTo（'.searchform块'）；

您是否考虑过使用纯css进行此操作？看一看css媒体查询（@media screen），我想在800px以下的设备上使用SlickNav jQuery移动菜单，并希望在整个主菜单消失且仅在用户单击菜单按钮时出现的情况下继续显示搜索栏。谢谢，这真的很有帮助，我不知道detach（）方法。