如何在其CSS類的基礎上將現有ul的所有li添加到另一個ul的底部

Question

我正在使網站響應，並且我需要合並兩個不同的菜單。 為此，我需要將ul的所有li添加到其他ul中。

這是我目前的標記的簡化：

<ul class="navigation-menu">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

<ul class="nav-bar">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

我需要使用類Navigation-menu將nav-bar的所有li添加到ul列表的底部，然后阻止nav-bar在瀏覽器中顯示。

這是我的嘗試：

$('ul.nav-bar li').each(function() {
   $(this).after('ul.nav-bar:last-child');
}

不確定如何解決這一問題。 如果有人能指出正確的方向，我將不勝感激。

Answer 1

您可以使用appendTo()將項目添加到.navigation-menu的底部：

$('ul.nav-bar li').each(function() {
  $(this).appendTo('ul.navigation-menu');
});

而且，您可以使用媒體查詢以特定的屏幕寬度隱藏另一個div（盡管由於它為空，所以將被“隱藏”）：

@media only screen and (max-width: 500px //example){
  .nav-bar{
    display: none;
  }
}

或JS（如果願意），但是在可以使用CSS的情況下沒有理由使用JS：

$('ul.nav-bar').hide();

小提琴

更新資料

正如vladkras指出的，您可以將JS簡化為：

$('ul.nav-bar li').appendTo('ul.navigation-menu');

新產品

Answer 2

你好這里是例子例

您所需要做的就是克隆列表元素，並將其附加在現有的第二個菜單之后：)

 $(function(){ var children = $(".nav-bar li").clone(); $(".navigation-menu").append(children); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="navigation-menu"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="nav-bar"> <li>4</li> <li>5</li> <li>6</li> </ul> 

並例如在斷點769px上隱藏元素

@media screen and (max-width:769px){
    .nav-bar{
        display: none;
    }
}

Answer 3

var navBar = $('.nav-bar'),
    LIs = navBar.children('li');
$('.navigation-menu').append(LIs);
navBar.hide(); // or .remove() if you don't need it anymore

小提琴