Question

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

我有一个为我的主导航链接构建，并在我试图拥有它的两个链接，所以当你点击它们时隐藏的div切换类hideMe打开和关闭显示：无

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

出于某种原因，我无法触发任何内容，（警报或toggleClass），并希望有人可以指出我可能缺少什么来正确使用此功能。感谢您提供的所有信息！

Answer 1

您的public class ExampleModel : PageModel { public void OnGet() { //do something } public void OnPost() { //do something } }位于多个函数内部且未暴露于窗口，因此单击public class ExampleModel : PageModel { public void OnAll() { //code executes for POST, PUT, GET, ... VERBS } }将无法找到该函数的任何线索，并将导致错误。

您可以将点击事件绑定到ID cntct()，这与您正在执行<a的元素相同。

contactLink

Answer 2

您应该使用$(document).ready()创建自己的功能。你可以说，在这种情况下，不需要使用$(document).ready()。

＆＃13;

function cntct(){
jQuery('#contactBx').toggleClass('hideMe');
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

WordPress中的JS / Jquery toggleClass

2 个答案: