javascript - 使用 jquery 更改 html 层次结构以进行移动布局

Question

我正在创建一个响应式网站，平板电脑和移动布局的菜单需要与 PC 布局不同。所以我的客户希望他的 Logo 首先出现在平板电脑/手机布局中，我尝试使用 jquery 但无法正常工作，有人可以帮助我吗？当窗口宽度小于 1024px 时，我需要 li fot Logo 是第一个，但我的 jquery 不工作。

html:

        <nav class="nav">
            <ul>
                <li><a href="#"><img class="lupa" src="img/lupa.png" alt="Search" onClick="ShowFieldSearch()"></a>
                  <div id="boxSearch">
                        <form id="formSearch" action="" method="get">
                            <input id="search" type="text" value="" maxlength="150" placeholder="Search..." onBlur="HideFieldSearch()">
                        </form>
                  </div>
                </li>
                <li><a href="#">Home Page</a></li>
                <li><a href="#">Products<img class="flechaVertical" src="img/flecha.png" alt="flecha"></a>
                </li>
                <li><a href="#"><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contats</a></li>
                <li><a href="#">Doubts</a></li>
            </ul>
        </nav>

CSS:

            #boxSearch{
    padding-left:15px;  
}

#Search{
    width:160px;
    height:50px;
    margin-left:10px;
    display:none;
    position:absolute;
    text-align:center;
    border:1px solid #222222;   
}

/* -------------------------------*/

/* Navigation Menus */

.lupa{
    width:30px;
    height:30px;
    padding-left:35px;  
}

.flechaVertical{
    width:8px;
    height:8px;
    padding-left:5px;   
}

.navLogo{
    width:160px;
    height:90px;    
}

.nav{
    width:200px;
    margin: 0;
    text-align: left;
    background-color: #FFFFFF;
    position: fixed;
}

.nav ul{    
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}

.nav ul li{
    display:block;
}

.nav ul li a,visited{
    color:#000000;
    display:block;
    padding:10px;
    padding-left:30px;
    text-decoration:none;
}

.nav ul li a:hover{
    color:#990000;
    text-decoration:none;
}

J查询:

         $(document).ready(function(){
         var $logo = $(".nav ul li").eq(3);
         function PositionLogo(){
           if($(window).width() < 1024){
             $logo.remove().insertBefore(".nav ul li:first-chiild");
           }
           else{
             $logo.remove().insertAfter(".nav ul li:nth-child(3));
           }
         }
        });

Answer 1

可能有更好的选择，但这也行得通:

您的 jQuery 也需要清理。

HTML

<li class="logo">
  <a href="#"><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></a>
</li>

jQuery

$(document).ready(function() {
  alert($(window).width() + "doc");
  var $logo = $(".logo");
  if ($(window).width() < 1024) {
     $logo.remove();
     $(".nav ul li:first-child").append($logo)
  }
});

因为您是在文档准备就绪时触发它，所以我认为您不需要 else 条件。

此外，如果调整窗口大小，您的代码也不会更改位置。

另外，我认为最好解雇它。

$(window).load(function() {

// your code

});

这是JSFiddle