javascript - WordPress 中的 JS/Jquery 切换类

Question

我正在尝试在 WordPress 的主页上集成一个简单的toggleClass 函数。

我为我的主导航链接构建了一个，并且在其中两个链接上我试图拥有它，因此当您单击它们时，隐藏的 div 会切换类 hideMe 以打开和关闭显示:无

javascript的代码如下，我在网上看到不能使用$，必须使用jQuery

 $(document).ready(function () {
      function cntct(){
        jQuery('#contactBx').toggleClass('hideMe');
        //$('#contactBx').toggleClass('hideMe');
        //alert('hey');
      });
 });

.hidCnt{
   width: 250px !important;
   height: 200px !important;
   background-color: red !important;
   z-index: 10 !important;
   position: absolute;
   top: 19%;
   left: 60%;
   display: none;
 }

.hideMe{
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="site-nav">
  <a class="nav-link active" href="anthonycarreramusic.com">Home</a>
  <a class="nav-link" href="#aboutAnch">About</a>
  <a class="nav-link" href="shows">Shows</a>
  <a class="nav-link" href="media">Gallery</a>
  <a class="nav-link" id="contactLink" runat="server" onClick="cntct();">Contact</a>
  <a class="nav-link" id="socialLink" runat="server">Social</a>
</nav>

<div class="hidCnt" id="contactBx">
   This is my test contact form region
</div>

出于某种原因，我无法触发任何一个(警报或切换类)，并且希望有人能够指出我可能缺少什么来正确地实现此功能。感谢您提供所有信息!

Answer 1

您的cntct()位于多个函数内，并且不暴露在窗口中，因此单击<a将不知道该函数在哪里，并且会导致错误。

您可以将点击事件绑定(bind)到 id contactLink这与您正在执行的操作相同的元素 onclick .

$(document).ready(function () {
   $("#contactLink").on("click", function(){
     jQuery('#contactBx').toggleClass('hideMe');
   });
});