Question

如何通过根据设备宽度替换现有HTML代码来动态修改DOM。使用@media查询隐藏或显示内容，尝试使用 .after 方法修改Jquery调整大小函数。需要帮助

使用过的代码

function resizefunction(){
 if ($(window).width() < 500)
 {
   var $leftsec = $(".active li:nth-child(4)").html();
   var $rightsec = $(".active li:nth-child(5)").html();
   $( ".active" ).after( "<li>" + $leftsec+ "</li><li>" + $rightsec+ "</li>" );
   $(".active div:nth-child(4)").css("display","none");
   $(".active div:nth-child(5)").css("display","none");
 }
 else
 {
   console.log('Resize > 500');
 }
};

桌面版

<html>
 <body>
 <ul class="parent">
  <li class="active">1st slider
  <ul class="child">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
 </ul>
 </li>
  <li>2st slider
   <ul class="child">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  </li>
 </ul>
 </body>
</html>

移动版

<html>
 <body>
  <ul class="parent">
   <li class="active">1st slider
    <ul class="child">
     <li>1</li>
     <li>2</li>
    </ul>
   </li>
   <li>2st slider
     <ul class="child">
      <li>3</li>
      <li>4</li>
     </ul>
   </li>
  </ul>
 </body>
</html>

Answer 1

您是否偶然想知道函数$（window）.resize（）？参考： - https://api.jquery.com/resize/

$(window).resize(function() {
  // This will execute whenever the window is resized
  $(window).width(); // New width
});

上述代码的参考： - http://www.sweet-web-design.com/wordpress/detecting-browser-window-size-resize-with-jquery/1614/

仅在移动设备上显示滑块而不是桌面

1 个答案: