我正在尝试创建类似于 this 的扩展器.我的意思是，当用户单击 Section xx 时，这应该展开到底部。现在，当用户点击时，它看起来像:
但我希望它是这样的:
这里是 js:
let sectionIndex = 0;
function addSection(position, relation) {
const template = `
<li class="section">
<button aria-label="Add section above" class="section__button section__button--up" value="beforebegin">↑</button>
<button aria-label="Add section below" class="section__button section__button--down" value="afterend">↓</button>
<span class="section__label collapsible"><button class="collapsible">Section ${++sectionIndex}</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea
commodo consequat.</p>
</div>
</span>
</li>`;
relation.insertAdjacentHTML(position, template);
}
const sections = document.querySelector('.js-sections');
sections.addEventListener('click', function (event) {
const button = event.target.closest('.section__button');
if (button !== null) {
const position = button.value;
const relation = button.parentElement;
addSection(position, relation);
}
event.preventDefault();
});
$(document).on('click', '.collapsible', function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
最佳答案
这个怎么样。基本上我已经删除了 .section__label 类中的 flex 属性。这就是导致元素彼此相邻的原因，如果您仍然需要 flex，您也可以尝试将 flex-direction 更改为 column。
我添加了一个新类 .section__label button { display:block;宽度:100%； } 只是为了更符合您想要的风格。
您仍然需要处理父容器的边框样式和大小。但这对您来说是一个开始。
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
.section {
display: grid;
grid-template-rows: 3em 3em;
grid-template-columns: 3em 1fr;
grid-template-areas:
"up label"
"down label";
background-color: #f7f7f7;
border: 1px solid #d8d8d8;
border-radius: 5px;
margin: 0.5em 0;
overflow: hidden;
}
.section__button {
appearance: none;
background-color: #d8d8d8;
font-size: 1em;
border: 0;
padding: 1em;
margin: 0;
color: white;
opacity: 0.5;
cursor: pointer;
transition: opacity 250ms ease-in-out, background-color 250ms ease-in-out;
;
}
.section__button:focus {
outline: 0;
}
.section:hover .section__button {
opacity: 1;
}
.section__button--up {
grid-area: up;
}
.section:hover .section__button--up {
background-color: #215467;
}
.section__button--down {
grid-area: down;
}
.section:hover .section__button--down {
background-color: #e2a418;
}
.section:hover .section__button:hover {
background-color: #55c773;
}
.section__label {
grid-area: label;
padding: 2em 5em 2em 2em;
}
.section__label button {
display: block;
width: 100%;
}
/*collapsible*/
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
grid-column: 2;
}
.collapsible {
cursor: pointer;
}
.collapsible>button {
border: none;
}
</style>
</head>
<body>
<ul class="js-sections">
<li>
<div class="section">
<button aria-label="Add section above" class="section__button section__button--up "
value="beforebegin">↑</button>
<button aria-label="Add section below" class="section__button section__button--down "
value="afterend">↓</button>
<span class="section__label collapsible"><button class="collapsible">Section 0
</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea
commodo consequat.</p>
</div>
</span>
</div>
</li>
</ul>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
let sectionIndex = 0;
function addSection(position, relation) {
const template = `
<li class="section">
<button aria-label="Add section above" class="section__button section__button--up" value="beforebegin">↑</button>
<button aria-label="Add section below" class="section__button section__button--down" value="afterend">↓</button>
<span class="section__label collapsible"><button class="collapsible">Section ${++sectionIndex}</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea
commodo consequat.</p>
</div>
</span>
</li>`;
relation.insertAdjacentHTML(position, template);
}
const sections = document.querySelector('.js-sections');
sections.addEventListener('click', function (event) {
const button = event.target.closest('.section__button');
if (button !== null) {
const position = button.value;
const relation = button.parentElement;
addSection(position, relation);
}
event.preventDefault();
});
$(document).on('click', '.collapsible', function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
</script>关于javascript - ul 扩展器列表未按预期运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59399113/