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

【问题标题】：Change html hierarchy using jquery for mobile layout使用 jquery 更改 html 层次结构以进行移动布局
【发布时间】：2016-05-04 00:56:07
【问题描述】：

我正在创建一个响应式网站，平板电脑和移动设备布局的菜单需要与 PC 布局不同。所以我的客户希望他的徽标首先出现在平板电脑/移动布局中，我尝试使用 jquery 但无法正常工作，有人可以帮助我吗？当窗口宽度小于 1024 像素时，我需要将徽标放在第一个位置，但我的 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;
}

jquery：

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

【问题讨论】：

你需要为第一个孩子删除多余的 i 并在 child(3) 之后添加一个 " 只是为了清理你的 jQuery

标签： javascript jquery html css hierarchy

【解决方案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

【讨论】：

【解决方案2】：

如果您需要这个小改动，只需跳过 Jquery 并使用 CSS 媒体查询来隐藏和显示徽标

用于桌面，一个用于使用 ID 的移动设备。

这是fiddle（调整结果块的大小）。在这种情况下，它将在 800 像素处发生变化，因此您可以在小提琴上看到结果。

首先将这一行添加到您的脑海中以进行响应

  <meta name="viewport" content="width=device-width, initial-scale=1">

HTML：

<nav class="nav">
    <ul>
        <li id="logo_nav">Logo Nav</li>
        <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 id="logo_desktop"> logo Desktop</li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contats</a></li>
        <li><a href="#">Doubts</a></li>
    </ul>
</nav>

CSS

#logo_nav{
    display: none;
}

@media only screen and (max-width: 1024px) {
    #logo_desktop {
        display: none;
    }

    #logo_nav {
        display: block;
    }
}

这应该可以工作

【讨论】：