Fatal编程技术网
  • javascript/
  • Javascript 仅在移动设备而非桌面上显示滑块

Javascript 仅在移动设备而非桌面上显示滑块

javascript jquery html css

Javascript 仅在移动设备而非桌面上显示滑块,javascript,jquery,html,css,media-queries,Javascript,Jquery,Html,Css,Media Queries,如何通过基于设备宽度替换现有HTML代码来动态修改DOM。使用@media querys隐藏或显示内容，使用尝试Jquery resize函数。使用方法修改后。需要帮助吗 演示 使用的代码 function resizefunction(){ if ($(window).width() < 500) { var $leftsec = $(".active li:nth-child(4)").html(); var $rightsec = $(".active li:nth-

如何通过基于设备宽度替换现有HTML代码来动态修改DOM。使用@media querys隐藏或显示内容，使用尝试Jquery resize函数。使用方法修改后。需要帮助吗

演示

使用的代码

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');
 }
};

function resizefunction（）{
如果（$（窗口）.width（）<500）
{
var$leftsec=$（“.active li:nth child（4）”）.html（）；
var$rightsec=$（“.active li:nth child（5）”）.html（）；
$（“.active”）。在（“
  • ”+$leftsec+”
    • “+$rightsec+””）之后；
$（“.activediv:nth child（4）”）.css（“显示”、“无”）；
$（“.activediv:nth child（5）”）.css（“显示”、“无”）；
}
其他的
{
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>

    

      
第一个滑块

        

      • 一,
        • 

      • 二,
        • 

      • 三,
        • 

      • 四,
        • 

      


    • 2st滑块

        

      • 一,
        • 

      • 二,
        • 

      • 三,
        • 

      • 四,
        • 

      

      •

    手机版

    <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>

    

      
第一个滑块

        

      • 一,
        • 

      • 二,
        • 

      


    • 2st滑块

        

      • 三,
        • 

      • 四,
        • 

      

      •

    您是否碰巧想了解函数$（window）.resize（）？参考：-

    以上代码的参考：-

    您是否可以提供一个工作的codeLINK[]演示打开控制台，以查看类{.current}中显示的更改。Resize将根据宽度工作，如何在滑块上迭代？您想为dom操作编写代码还是想在何时执行dom操作编写代码？@SuryaRPraveen这里有一个指向纯css滑块的链接-之后，您可以创建两个dom，一个用于移动，另一个用于桌面，并按您希望的方式进行操作。：）DOM操纵幻灯片演示文稿，针对手机和Tablets@SuryaRPraveen请检查评论。我已经发布了你所需要的。然而，如果你需要它的优化和所有，那么我将无法帮助，因为我没有任何经验在这方面。