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的每个实例上增加一些顶边距。我不喜欢这样做，但是如果我找不到其他简单的控制方法，就需要这样做。

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

提前感谢！

欢呼Wayjo

我看过相关的答案，但都不是我想要的...我想。抱歉，如果我要重复一个问题。此HTML在产品包装盒内的页面上多次使用，并且......>

Answer 1

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

您可以在没有JS的情况下，以更清洁的方式实现此目标。为什么不创建按钮2隐藏的自定义类并将其附加到all-buttons-container？

Answer 2

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