Как при функции resize переносить объекты без дублей?

283

26 ноября 2016, 18:45

У меня есть несколько списков, при ресайзе окна < 640 px, у меня появляется мобильное меню (SlickNav), которое формируется из одного из списков. Мне нужно чтобы в этом меню был ещё один список, который находится за пределами этого блока. Я пытаюсь его перенести таким образом, но проблема в том, что при каждом ресайзе объекты дублируются и их становится очень много:

$(window).resize(function() { 
  if ($(window).width() < 640) { 
    $(".primary-menu").appendTo(".slicknav_nav"); 
  } else { 
    $(".primary-menu").appendTo(".prim-box"); 
  } 
}); 
if ($(window).width() < 640) { 
  $(".primary-menu").appendTo(".slicknav_nav"); 
} else { 
  $(".primary-menu").appendTo(".prim-box"); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <ul class="slicknav_nav"> 
    <li><a href="">Mobile menu</a> 
    </li> 
    <li><a href="">Mobile menu</a> 
    </li> 
    <li><a href="">Mobile menu</a> 
    </li> 
    <li><a href="">Mobile menu</a> 
    </li> 
    <li><a href="">Mobile menu</a> 
    </li> 
  </ul> 
</div> 
<footer> 
  <div class="dop-mnu"> 
    <div class="prim-box"> 
      <ul class="primary-menu"> 
        <li>Dop menu 1</li> 
        <li>Dop menu 1</li> 
        <li>Dop menu 1</li> 
        <li>Dop menu 1</li> 
        <li>Dop menu 1</li> 
      </ul> 
    </div> 
  </div> 
</footer>

Скрипт такой, чтобы работал не только при ресайзе, но и при посещении сайта с экраном меньше чем 640. Буду благодарен за помощь.

Структура разметки примерная, чтобы обозначить сложность.