更改列表元素及其子元素的显示，并在列表中向上移动元素

Question

我有一个列表，其中的列表元素样式为内联块。当每个列表元素被点击时，我想：

1. 更改显示：内联块；显示：块；列表元素的
2. 更改显示：无；显示：块；子div的
3. 将单击的元素移动到列表顶部
4. 如果单击了多个元素，则所有元素都会执行相同的操作，并一起在列表中向上移动

再次单击(切换(时，我希望列表反转以上内容(反转显示并返回到其原始位置(。

到目前为止，我只成功地将列表元素的显示更改为block，但我无法将element.children作为子div的目标，也无法将列表元素向上移动到顶部。

function showCombo(ID) {
var x = document.getElementById(ID);
var xshow = getComputedStyle(x, null).display; //
if (xshow == "inline-block") {
x.style.display = "block";
} else {
x.style.display = "inline-block";
}
}

li {
display: inline-block;
border: 1px solid black;
border-radius: 3px;
cursor: pointer;
}
li div {
display: none;
}

<ul>
<li ID="1" onclick="showCombo(1)">
<p>Title 1</p>
<div>Show content</div>
</li>
<li ID="2" onclick="showCombo(2)">
<p>Title 2</p>
<div>Show content</div>
</li>
<li ID="3" onclick="showCombo(3)">
<p>Title 3</p>
<div>Show content</div>
</li>
<li ID="4" onclick="showCombo(4)">
<p>Title 4</p>
<div>Show content</div>
</li>
<li ID="5" onclick="showCombo(5)">
<p>Title 5</p>
<div>Show content</div>
</li>
</ul>

Answer 1

切换一个具有所有属性的类会更容易：

function showCombo(x) {
x.classList.toggle('active')
}

li {
border: 1px solid black;
margin:2px;
border-radius: 3px;
cursor: pointer;
}
li div {
display: none;
}
ul {
display:flex;
flex-wrap:wrap;
list-style:none;
}
li.active {
width:100%; /* full width*/
order:-1; /* move to the top */
}
li.active div {
display:block; /* show div */
}

<ul>
<li onclick="showCombo(this)">
<p>Title 1</p>
<div>Show content</div>
</li>
<li onclick="showCombo(this)">
<p>Title 2</p>
<div>Show content</div>
</li>
<li  onclick="showCombo(this)">
<p>Title 3</p>
<div>Show content</div>
</li>
<li  onclick="showCombo(this)">
<p>Title 4</p>
<div>Show content</div>
</li>
<li onclick="showCombo(this)">
<p>Title 5</p>
<div>Show content</div>
</li>
</ul>

Answer 2

我用javascript创建了你的想法，并非常专注于此，但你可以像前面的答案一样在css中使用order，这会更容易，如果你有问题问我，如果你想做一个小的编辑，告诉我，我会把一些事件的解释链接，我使用它们的函数放在我的javascript代码中，以防你不知道它们

插入之前

预端

分类列表

getElementsByClassName

getAttribute

设置属性

var li = document.getElementsByClassName("li"),
ul = document.getElementById("ul");
for (let i = 0; i < li.length; i = i + 1) {

li[i].setAttribute("index", i); // Create attribute named index and its value will be the i, this is to know the index of the li, we need it when clicked on it again

li[i].setAttribute("firstclick", "yes"); // This is to know if we clicked at it firsttime or secondtime toggle

li[i].onclick = function () {

if (this.getAttribute("firstclick") == "yes") {
this.setAttribute("firstclick", "no"); // Change it to no to when clicking it once again read the second case

ul.prepend(this); // Put the clicked li at the top of the li, prepend means to put it the first element
this.classList.add("displayBlock") // add the class displayBlock check it in the css it contains display: block
this.getElementsByClassName("content")[0].classList.add("displayBlock"); // Add the displayBlock to the div inside the clicked li to show
} else {
this.setAttribute("firstclick", "yes"); // Change it to yes to when clicking it once again read the first case

ul.insertBefore(this, li[parseInt(this.getAttribute("index")) + 1]) // Insert It to its original position

this.classList.remove("displayBlock"); // Remove the display block class
this.getElementsByClassName("content")[0].classList.remove("displayBlock"); // Remove the display block class


}


}
}

li {
display: inline-block;
border: 1px solid black;
border-radius: 3px;
cursor: pointer;
}
li div {
display: none;
}
.displayBlock {
display: block;
}

<ul id="ul">
<li class="li" >
<p>Title 1</p>
<div class="content">Show content</div>
</li>
<li class="li" >
<p>Title 2</p>
<div class="content">Show content</div>
</li>
<li class="li" >
<p>Title 3</p>
<div class="content">Show content</div>
</li>
<li class="li" >
<p>Title 4</p>
<div class="content">Show content</div>
</li>
<li class="li" >
<p>Title 5</p>
<div class="content">Show content</div>
</li>
</ul>