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

Question

我有带大型菜单的导航。如果我点击“选项 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 来做到这一点？

Answer 1

替代方法是使用 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>

Answer 2

完全避免 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>

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

How to change display:block to display:none using only SCSS?

html

css

sass

megamenu