【发布时间】：2017-11-16 08:40:53
【问题描述】：
我有一个应用程序，它有一个<nav> 项目选择列表，这些项目将在<article> 区域中动态打开。每个项目在<article> 区域中用display:none 定义为<div>，直到用户单击<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>© 2017</footer>
</div>
</body>
</html>
【问题讨论】：
-
当没有工作代码 sn-p 重现问题时，我们无能为力，当然您可以使用 javascript 更改
order。或者，您可以使用脚本交换标记中的元素位置。
标签： javascript html css flexbox