Question

我有无序列表，我想在某些屏幕尺寸上分成两部分，我试着跟随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);

但是上面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 作为菜单。

Answer 1

你正在做的是不正确的，因为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');

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

1 个答案: