如何使用 Jquery 在下拉菜单上更改 div css/scss？答案

【问题标题】：How to use Jquery to change div css/scss on a dropdown menu?如何使用 Jquery 在下拉菜单上更改 div css/scss？
【发布时间】：2019-12-27 00:18:35
【问题描述】：

我是 jquery 初学者。我正在尝试制作一个下拉菜单，当用户单击其中一个按钮时，它将链接到其正确的部分。在用户单击按钮之前，必须隐藏所有部分（display: none），但是当从下拉列表中选择一个选项时，我想使用 js/jquery 触发部分 div 中的 css 更改以显示（display: block ）。很迷茫，我似乎无法让 jquery 工作，任何帮助将不胜感激！谢谢！

$(document).ready(function() {
  $('#departments a').on('click',function()) {
        $(this).css({'display','block'});
  });
}

article.apply {
  padding-bottom: 6rem;
}
article.apply  p {
  margin-bottom: 4rem;
}
article.apply  div.math {
  display: none;
}
article.apply  div.cmsc {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
   <a id= "selectedDept" class="dropbtn button button-red 
                        caret"> Search </a>
      <div id = "departments" class="dropdown-content">
         <a class= "dept" href="#math">MATH</a>
         <a class= "dept" href="#cmsc">CMSC</a>
       </div>
</div>

<article class="apply">
   <div class=“math”>
      <h2> Hello World </h2>
   </div>
   <div class=“cmsc”>
      <h2> Hello World! </h2>
   </div>
</article>

【问题讨论】：

与您的问题无关，我想提请您注意api.jquery.com/hide 和api.jquery.com/show，因为您没有理由使用css() 来做您想做的事情。

标签： javascript jquery html sass

【解决方案1】：

正如您在 sn-p 代码上的控制台中看到的那样，您的 Javascript 非常错误：

您忘记关闭最后一个 )（ready() 函数）
你在回调的{}之前关闭了函数.on()
您使用{'display','block'} 而不是{'display': 'block'} 更新css

$(document).ready(function() {
  $('#departments a').on('click', function() {
    $(this).css({'display':'block'});
  });
});

article.apply {
  padding-bottom: 6rem;
}
article.apply  p {
  margin-bottom: 4rem;
}
article.apply  div.math {
  display: none;
}
article.apply  div.cmsc {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
   <a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
      <div id = "departments" class="dropdown-content">
         <a class= "dept" href="#math">MATH</a>
         <a class= "dept" href="#cmsc">CMSC</a>
       </div>
</div>

<article class="apply">
   <div class=“math”>
      <h2> Hello World </h2>
   </div>
   <div class=“cmsc”>
      <h2> Hello World! </h2>
   </div>
</article>

【讨论】：