如何仅使用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>

​