如何「剪切」DOM元素並將其顯示在其他位置？

我有網站，並且我想要從.tab-content中「剪切」每個div#id，並且只在視口寬度小於768px時纔將每個div加到每個li。如何「剪切」DOM元素並將其顯示在其他位置？

我的HTML頁面：

<section id="menu"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <ul id="menu-nav" class="nav nav-pills text-center"> 
        <li class="active"><h2><a href="#about" data-toggle="tab">About</a></h2></li> 
        <li><h2><a href="#services" data-toggle="tab">Services</a></h2></li> 
        <li><h2><a href="#contact" data-toggle="tab">Contact</a></h2></li> 
       </ul> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="tab-content"> 
        <div class="tab-pane active" id="about"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <p class="text-center"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati. 
          </p> 
         </div> 
        </div> 

        <div class="tab-pane" id="services"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <p class="text-center"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati. 
          </p> 
         </div> 
        </div> 

        <div class="tab-pane" id="contact"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <p class="text-center"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati. 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>

我試圖用jQuery的每一個DIV＃ID，但它不工作。

$(document).ready(function(){ 

    if ($(window).width() < 768) { 
     var divAbout = $('#about').pop(); 
     $(divAbout).appendTo('#menu-nav li:first-of-type'); 
    } 

    });

我想對移動這一結果：

<li> 
<h2>About</h2> 
<div id="about"> 
... 
</div> 
</li>

而同樣給其他的div。

來源

2015-04-01 Robson

使用媒體查詢，而不是jQuery的 – 2015-04-01 10:50:49

你已經使用Bootstrap，對吧？你只需要用'col-XX-＃'來解決這個問題 – cr0ss 2015-04-01 10:52:39

@MohitJain如何使用媒體查詢來做到這一點？我只能操作css，但不能更改DOM。 – Robson 2015-04-01 10:56:22

您可以使用調整大小處理程序，並做

var flag; 
$(window).on('resize.menu', function() { 
    var width = $(window).width(), 
     $ul = $('#menu-nav'); 
    if (width < 768 && flag != 1) { 
     flag = 1; 
     $('#menu .tab-content .tab-pane').each(function() { 
      $(this).appendTo($ul.find('li:has(a[href="#' + this.id + '"])')) 
     }); 
    } else if (width >= 768 && flag != 2) { 
     flag = 2; 
     $ul.find('.tab-pane').appendTo('#menu .tab-content'); 
    } 
}).trigger('resize.menu')

演示：Fiddle

來源

2015-04-01 10:58:36

完美的作品。這正是我想要做的。非常感謝！ – Robson 2015-04-01 11:32:11

希望你正在尋找開發一個響應式網頁設計。而不是削減DOM並將其添加到li標記。使用CSS3 media queries可根據元素寬度顯示和隱藏元素。

但這裏是你的問題的方法：

$(document).ready(function(){ 

    if ($(window).width() < 768) { 
     $(".tab-content div").each(function(index, ele) { 
      var id = this.id; // about , contact 
      $("li a[href='#'"+id+"]").parent().parent().append(this); 
      // this will match li with a having href="#about" etc 
     }); 
    } 

});

來源

2015-04-01 10:57:01 mohamedrias

如何「剪切」DOM元素並將其顯示在其他位置？

回答

相關問題