JS:添加依赖于类的样式存在于兄弟姐妹的孩子中

Question

我看过相关的答案，但没有一个是我想要的......我认为。如果我重复一个问题，请道歉。

此 HTML 在产品框中的页面上多次使用，并显示在产品类别页面上。

<div class"all-buttons-container">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2 **hidden**">text</a>
</div>
</div>

在这个(大大简化的(HTML 中，我有一个容纳 2 个兄弟姐妹的容器。 - 每个兄弟姐妹都包含一个锚点。

• 按钮容器始终可见。

• 有时，.button2定位点还具有引导类hidden，因此不再显示定位点。这是在每个产品框中完成的，具体取决于是否需要该产品的第二个按钮。我无法控制这一点。

• 当.button2锚点具有hidden类时，我需要添加一些margin-top以button1-container使其垂直居中

我打算使用纯风格(flexbox(，但它没有达到我需要的。

我想在每次页面完成加载时运行一点 jQuery 或纯 JS，如果需要，在此 HTML 的每个实例上添加一些上边距。我不喜欢这样做，但如果我找不到另一种简单的方法来控制它，就需要这样做。

任何想法...解决 方案。。。完美的解决方案等？

提前感谢！

干杯 韦霍

Answer 1

我想我已经完全理解你的问题了。

您可以在没有 JS 的情况下实现这一点，在任何更干净的任何情况下。 为什么不制作一个自定义的button2隐藏类并将其附加到all-buttons-container？

<div class"all-buttons-container button2-hidden">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2">text</a>
</div>
</div>

然后你有这个 CSS：

.button2-hidden .button2-container{
display: none; // or visibility -- whatever you want
}
.button2-hidden .button1-container{
margin-top: 1rem;
}

Answer 2

如果您可以添加一个div 来包含按钮，则可以使用以下代码片段：

.all-buttons-container{
display: flex; /* important part */
align-items: center;  /* important part */
padding: 10px;
background-color: grey;
width: 200px;
border: 2px solid #fff;
height: 150px;
}
.hidden {
display: none!important;
}
.all-buttons-container > div a{
display: inline-block;
background-color: blue;
padding: 7px;
margin: 7px;
color: #fff;
}

<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2 hidden">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1 hidden">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>