如何仅使用 SCSS 将 display:block 更改为 display:none？答案

【问题标题】：How to change display:block to display:none using only SCSS?如何仅使用 SCSS 将 display:block 更改为 display:none？
【发布时间】：2021-10-25 20:43:55
【问题描述】：

我有一个带有大型菜单的导航。如果我点击“选项1”，我需要在list-1上设置display: block。如果我点击“选项2”，我需要在list-1上设置display: none，在list-2上设置display: block。

这里是megamenu的一个例子：

<div>
    <ul>
       <li class="option-1"><a>option 1</a></li>
       <li class="option-2"><a>option 2</a></li>
    </ul>

    <ul class="list-1">
       <li>option</li>
       <li>option</li>
    </ul>

    <ul class="list-2">
       <li>option</li>
       <li>option</li>
    </ul>
</div>

有谁知道如何只使用 SCSS 或 CSS 来做到这一点？

【问题讨论】：

应用样式并在点击时保持应用的唯一方法是使用一点 JavaScript。
你可能会用一个复选框或类似的东西来破解它，但我可以问你为什么不想使用 JS 吗？
Tnx @avia，我需要构建非常轻量的webapp，所以我不能使用JS

标签： html css sass megamenu

【解决方案1】：

完全避免使用 JS/jQuery，您可以将复选框设置为“按钮”并使用类似这样的代码。

.option-1:checked ~ .list-1 {
  display:none;
}

.option-2:checked ~ .list-2 {
  display:none;
}

<input class="option-1" type="checkbox">
<input class="option-2" type="checkbox">



<ul class="list-1">
  <li>1</li><li>2</li>
</ul>

<ul class="list-2">
  <li>3</li><li>4</li>
</ul>

【讨论】：

【解决方案2】：

替代方法是使用 JS 或 jQuery，如下所示：

$('.list').hide();
$('.button-1').click(function() {
   $('.list').hide();
   $('.list-1').toggle();
});
$('.button-2').click(function() {
  $('.list').hide();
   $('.list-2').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button-1">1</button>
<button class="button-2">2</button>


    <ul class="list-1 list">
       <li>option1</li>
       <li>option1</li>
    </ul>

    <ul class="list-2 list">
       <li>option2</li>
       <li>option2</li>
    </ul>
</div>

【讨论】：

谢谢，我想最后我必须使用JS。
好吧，从技术上讲，您可以将复选框设置为“按钮”并使用类似于我的第二个答案中的代码。
是的，但这样我需要显示复选框。
好吧，是的，也不是，你可能可以设计出足够的样式来获得某种“按钮”效果，如果这是你想要的，让它们看起来像一个普通的 div/span。这是一个非常酷的入门资源：css-tricks.com/the-checkbox-hack 但是，如果您使用 CSS（或其他）“破解”复选框，请确保验证与所有主要浏览器的兼容性。