javascript - jQuery 防止 nextAll() 反转菜单顺序

Question

当 menuitem 被点击时，它的兄弟项会 float 到右边。

为此我使用了 jQuery 的 nextAll()。

我的问题是， float sibling 的顺序颠倒了，我希望它们保持初始顺序。

我的问题是:是否有能够执行此操作的 jQuery 方法？否则，我如何创建按正确顺序正确 float 的菜单项的预期行为？

我尝试使用:

• '.backAll()',
• 'Array.prototype.reverse',
• '$('.menu').nextAll().toArray();'并在上面调用 .reverse()。

我明白， float 完全按照它应该做的，但我无法掌握我应该何时以及如何重新排序我的菜单项以“正确”放置它们(我希望它们如何放置)。

我是否需要创建一个数组，通过它迭代以重新排列那些用 .nextAll() 抓取的菜单项，或者我是否必须在另一个时间调用 float:right？

另请参阅此 JSfiddel 举个例子。单击一个 div 会使其兄弟项向右浮动并颠倒顺序，这是我不希望发生的。

如果您能对我明显遗漏/不理解的行为做一个简短的解释并指出我的行为，我也将非常感激。

谢谢。

$('.menu').on('click', function() {
  $(this).nextAll().css('float', 'right');
});

.menu {
  float: left;
  height: 60px;
  width: 60px;
  border: 1px solid #000;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='menu'>A
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
  <div class='menu'>B
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
  <div class='menu'>C
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
  <div class='menu'>D
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
</div>

编辑已接受的答案:我通过@UncaughtTypeError 添加了正确答案并修改了 fiddle ，这有助于我更好地理解发生了什么并删除了展示所需行为不需要的 else-fork。 JSfiddle by @UncaughtTypeError

编辑 2:@UncaughtTypeError 根据他的评论修改了他的示例并将其添加为单独的答案。请参阅下文以获得更深入的解释。

Answer 1

应用的主要功能:

1. .prependTo(): https://api.jquery.com/prependto/
2. .nextAll(): https://api.jquery.com/nextAll/
3. .appendTo(): https://api.jquery.com/appendto/
4. .prevAll(): https://api.jquery.com/prevAll/

下面嵌入的代码片段演示了将上述功能应用于向右移动元素，然后在再次单击时将它们恢复到初始状态。

$('.menu').on('click', function() {
  if (!jQuery(this).parent().hasClass('align-right')) {
    if ($('.align-right').length == 0) {
      $('<div class="align-right"></div>').prependTo('.container');
      $(this).nextAll().prependTo('.align-right');
    } else {
      $(this).nextAll().prependTo('.align-right');
    }
  } else if (jQuery(this).parent().hasClass('align-right')) {
    jQuery(this).prevAll().appendTo('.container');
    if (jQuery(this).prevAll().length == 0) {
      jQuery(this).appendTo('.container');
    }
  }
});

.menu {
  float: left;
  position: relative;
  height: 60px;
  width: 60px;
  border: 1px solid #000;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
}

.align-right {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='menu'>A
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
  <div class='menu'>B
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
  <div class='menu'>C
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
  <div class='menu'>D
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
    <div class='submenu'></div>
  </div>
</div>

jSFiddle: https://jsfiddle.net/b4wywp30/8/