javascript - 重新排序 <ul> 的显示顺序

Question

<分区>

Answer 1

您可以使用名为 flexbox 的 CSS3 功能 - 准确地说是 order property 。您可以使用 nth-child 指定要更改顺序的元素，或者您可以简单地给它们一个类并使用它进行操作。示例:

HTML:

<ul class="list-unstyled">
    <li class="active"><a href="#">Home</a></li>
    <li class="left-element"><a href="#">About Me</a></li>
    <li class="left-element"><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

CSS:

.list-unstyled {
    display: flex;
    list-style: none;
}

.list-unstyled li {
    margin: 5px;    
}

.list-unstyled li.left-element {
    order: -1; /* the default is 0 */
}

Fiddle 这个例子。

但是，请务必检查它是 availability on different platforms 并确保它适合您。当我发现这个 SO answer 时，我发现了 flexbox。

编辑:

作为 T.J.Crowder mentioned ，最好为特定浏览器使用前缀，因为只有某些浏览器的最新版本才支持无前缀实现。您可以检查不同的前缀版本 here 。

检查扩展示例(更新的 fiddle 是 here )。至于我在旧版 Firefox(版本 20)中的测试，它看起来不支持小于 0 的顺序值，因此我为所有元素添加了顺序值:

<ul class="list-unstyled">
    <li class="active center-element"><a href="#">Home</a></li>
    <li class="left-element"><a href="#">About Me</a></li>
    <li class="left-element"><a href="#">Work</a></li>
    <li class="right-element"><a href="#">Contact</a></li>
    <li class="right-element"><a href="#">Blog</a></li>
</ul>

<style>
    .list-unstyled {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        list-style: none;
    }

    .list-unstyled li {
        margin: 5px;
    }

    .list-unstyled li.left-element {
        -webkit-box-ordinal-group: 0;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 0;      /* OLD - Firefox 19- */
        -ms-flex-order: 0;              /* TWEENER - IE 10 */
        -webkit-order: 0;               /* NEW - Chrome */
        order: 0;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .list-unstyled li.center-element {
        -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
        -ms-flex-order: 1;              /* TWEENER - IE 10 */
        -webkit-order: 1;               /* NEW - Chrome */
        order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .list-unstyled li.right-element {
        -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
        -ms-flex-order: 2;              /* TWEENER - IE 10 */
        -webkit-order: 2;               /* NEW - Chrome */
        order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }
</style>