个人中心
gpt4 book ai didi

javascript - 根据用户事件顺序通过 JavaScript 动态更改 CSS flex 顺序

转载 作者：行者123 更新时间：2023-11-28 15:15:32 24 4
gpt4 key购买 nike

我有一个应用程序有一个 <nav>将在 <article> 中动态打开的元素选择列表区域。每个元素都定义为 <div>在<article>区域 display:none , 直到当用户点击 <nav> 中的选项时，每一个都被 JavaScript 函数激活.正如它们出现在 <article> 中一样区域，它们按照它们在 <article> 中定义的顺序显示.代码的突出部分和有些伪部分如下所示。

我希望每个 div 都按照用户点击的顺序显示，而不是按照 div 的布局顺序显示。所以如果用户选择 item002然后item001 , 相应的 div 将以 item002, item001 的顺序显示.

我一直在尝试通过动态更改文章 div 的顺序来找到一种使用 flex 列布局来执行此操作的方法，例如:

document.getElementById(shID).order = myOrdervar;

到目前为止，我所尝试的一切都没有奏效，而且我找不到关于 flex 的文档来告诉我这是否可行。有没有人有改变文章 div 显示顺序的技术，有或没有 flex？

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            font: 1em Helvetica;
            background: #999999;
        }
        #main {
            min-height: 500px;
            margin: 0;
            padding: 0;
            display: flex;
            flex-flow: column;
        }
        #main > article {
            margin: 4px;
            padding: 5px;
            border: 1px solid #cccc33;
            border-radius: 7pt;
            background: #dddd88;
            height: 600px;
            flex: 3 1 60%;
            order: 2;
            flex-flow: column;
        }
        #main > nav {
            margin: 4px;
            padding: 5px;
            border: 1px solid #8888bb;
            border-radius: 7pt;
            background: #ccccff;
            height: 600px;
            flex: 1 6 20%;
            order: 1;
            overflow: auto;
        }
        header, footer {
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 100px;
            border: 1px solid #eebb55;
            border-radius: 7pt;
            background: #ffeebb;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
        /* Too narrow to support three columns */
        @media all and (max-width: 640px) {
            #main, #page {
                flex-direction: column;
            }
            #main > article, #main > nav, #main > aside {
                /* Return them to document order */
                order: 0;
                flex-direction: column;
            }
            #main > nav, #main > aside, header, footer {
                min-height: 50px;
                max-height: 50px;
            }
        }
    </style>
    <script language="javascript" type="text/javascript">
        var globalOrder = 1;
        function showHide(shID) {
            if (document.getElementById(shID)) {
                if (document.getElementById(shID + '-show').style.display != 'none') {
                    document.getElementById(shID + '-show').style.display = 'none';
                    document.getElementById(shID).style.display = 'flex';
                    document.getElementById(shID).style.order = globalOrder;
                    globalOrder++;
                }
                else {
                    document.getElementById(shID + '-show').style.display = 'inline';
                    document.getElementById(shID).style.display = 'none';
                }
            }
        }
    </script>
    <style type="text/css">
        /* This CSS is used for the Show/Hide functionality. */
        .more {
            display: none;
            border-top: 0px solid #666;
            border-bottom: 0px solid #666;
        }
        .showSquid {
            display: block;
            border-top: 0px solid #666;
            border-bottom: 0px solid #666;
        }
        a.showLink, a.hideLink {
            text-decoration: none;
            font-size: 1.0em;
            font-family: 'MergeLight', Arial, Verdana, Helvetica, sans-serif;
            font-weight: bold;
            padding-left: 0px;
            border-top: 0px solid #666;
            border-bottom: 0px dotted #36f;
        }
        a.hideLink {
            background: transparent url(up.gif) no-repeat left;
        }
        a.showLink:hover, a.hideLink:hover {
            color: white;
        }
    </style>
</head>
<body>
    <header>
        Sources
    </header>
    <div id='main'>
        <nav>
            <a href='#' id='Wilmington Wind-show' class='showLink' onclick='showHide("Wilmington Wind");return false;'>
                Wilmington Wind
            </a><br>
            <a href='#' id='ArtMachine.mp3-show' class='showLink' onclick='showHide("ArtMachine.mp3");return false;'>
                Art Machine
            </a><br>
            <a href='#' id='Breathing-original.mp3-show' class='showLink' onclick='showHide("Breathing-original.mp3");return false;'>
                Breathing
            </a><br>
            <a href='#' id='ToroidMachine-show' class='showLink' onclick='showHide("ToroidMachine");return false;'>
            </a>
        </nav>
        <article>
            <div id='Wilmington Wind' class='more' style="flex-direction: column;">
                Wilmington Wind<br>
            </div>
            <div id='ArtMachine.mp3' class='more' style="flex-direction: column;">
                Art Machine<br>
            </div>
            <div id='Breathing-original.mp3' class='more' style="flex-direction: column;">
                Breathing
            </div> <!-- Breathing-original.mp3 -->
        </article>
        <footer>&copy; 2017</footer>
    </div>
</body>
</html>

最佳答案

父元素需要display: flex; — 在你的例子中，这是 <article>元素。

将此添加到您的 <style>元素:

article {
    display: flex;
}

关于javascript - 根据用户事件顺序通过 JavaScript 动态更改 CSS flex 顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47312321/

24 4 0
文章推荐： html - Bootstrap- img 标签不适合 div
文章推荐： html - 响应式 html 电子邮件模板有问题
文章推荐： ios - 我们如何在使用表达式值时使用 "context"(使用 :context:)?
文章推荐： html - 响应式纵横比与纯 css : how to fill container's height?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com