javascript - 单击列表中的 li 项目时，如何使用 jquery 将单击的项目附加到单独的 div 中，并将剩余列表项附加到不同的 div 标记中

Question

我有 li 列表项。当我单击任何一个 li 项目时，它应该附加或显示到一个 div 标签，同时剩余的列表项应该使用 jQuery 附加到其他 div 标签中。

$(document).on('click', '.main-menu li', function() {
  $('.sidenav').append($('.topnav')[0].innerHTML);
  $('.topnav').empty();
  $(this).remove()
});

<div class="topnav"></div>
<nav class="main-menu">
  <ul>
    <li class="acc">
      <a href="#">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
         List One
        </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#">
        <i class="fa fa-laptop fa-2x"></i>
        <span class="nav-text">
          List Two
        </span>
      </a>
    </li>
    <li class="has-list">
      <a href="#">
        <i class="fa fa-list fa-2x"></i>
        <span class="nav-text">
          List Three
        </span>
      </a>
    </li>
  </ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 1

希望我正确理解了您的期望。正如之前提到的，如果你想将 li 附加到你的 div 中，你需要在顶部添加一个父 ul。

根据建议，这里是一个片段:

$('.main-menu li').on('click', function(_click) {
  var $selectedLi = $(_click.currentTarget);
  $('.topnav ul').append($selectedLi.clone());
  $selectedLi.remove();
  $('.sidenav ul').append($('.main-menu ul').clone());
  $('.main-menu ul').remove()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
  <ul></ul>
</div>
<nav class="main-menu">
  <ul>
    <li class="acc">
      <a href="#">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
         List One
        </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#">
        <i class="fa fa-laptop fa-2x"></i>
        <span class="nav-text">
          List Two
        </span>
      </a>
    </li>
    <li class="has-list">
      <a href="#">
        <i class="fa fa-list fa-2x"></i>
        <span class="nav-text">
          List Three
        </span>
      </a>
    </li>
  </ul>
</nav>
<div class="sidenav">
  <ul></ul>
</div>