jQuery 切换并没有真正起作用

Question

在 this site 上，我有以下 <script>

<script>
    $(document).ready(function() {
        $('#menu-item-63>a').click(function(){
            $('#newsletter-container').toggle();
        }
    }};
</script>

以及以下菜单：

<ul id="menu-bottom-menu" class="menu"><li id="menu-item-56"><a href="https://staging.venusanddiamonds.com/contact">Contact Us</a></li>
    <li id="menu-item-63"><a href="#">Subscribe</a></li>
    <li id="menu-item-55"><a href="https://staging.venusanddiamonds.com/faq">FAQ</a></li>
    <li id="menu-item-54"><a href="https://staging.venusanddiamonds.com/privacy-terms">Privacy &amp; Terms</a></li>
    <li id="menu-item-53"><a href="https://staging.venusanddiamonds.com/news-events">News &amp; Events</a></li>
</ul>

以及以下 div：

<div id="newsletter-container">
    <div id="newsletter">
        ...etc...
    </div>
</div>

但是，当我单击底部菜单中的 Subscribe 时，切换不起作用 - #newsletter-container 不显示。

Answer 1

存在语法错误。应该是：

$(document).ready(function() {
    $('#menu-item-63>a').click(function(){
        $('#newsletter-container').toggle();
    });
});

Answer 2

您有语法错误。单击事件和文档就绪未正确关闭：

     $(document).ready(function() {
         $('#menu-item-63>a').click(function(e){
              e.preventDefault(); // use this to stop the default behavior of anchor.
             $('#newsletter-container').toggle();
         }); // here
     }); // here too

Answer 3

通过按 F12 查看浏览器的控制台来检查语法错误。这个错误必须在那里显示...

工作代码：

$(document).ready(function() {
    $('#menu-item-63>a').click(function(){
        $('#newsletter-container').toggle();
    });
});

Answer 4

检查您的 ready 和 click 活动是否正常。

    $('#menu-item-63 a').click(function(){
        $('#newsletter-container').toggle();
    }

Answer 5

您的脚本中存在语法错误。

$(document).ready(function() {
    $('#menu-item-63 > a').click(function() {
        $('#newsletter-container').toggle();
    }
}); // You put "}" but it's supposed to be ")"

您还遇到了 "subscribe" link 的问题。

<a href="#">Subscribe</a>

默认情况下，link 会执行您期望的操作。您将 href 属性设置为“#”，因此当您单击它时，浏览器将加载 url “https://staging.venusanddiamonds.com/#”，而这不是您想要的行为。

$(document).ready(function() {
    $('#menu-item-63 > a').click(function(event) {
        event.preventDefault(); // Stop the browser from performing the default action on the anchor
        $('#newsletter-container').toggle();
    }
});

Answer 6

如果您的站点中引用了很多 JavaScript libraries/plug-ins，如上所述，您可能会遇到 jQuery 冲突。您可以尝试将“$”替换为 "jQuery"，如下所示：

jQuery(document).ready(function() {
    jQuery('#menu-item-63 > a').click(function(){ 
        jQuery('#newsletter-container').toggle(); 
    }); 
});

此外，您应该始终在引用任何其他 JavaScript 库或插件之前引用 jQuery 库，因为这些站点也可能依赖于 jQuery。

Answer 7

看起来您正在 WordPress 中使用 jQuery...

在 WordPress 中 $ 无法开箱即用以避免冲突...

您需要使用以下代码...

jQuery(document).ready(function($) {
    $('#menu-item-63>a').click(function(){
        $('#newsletter-container').toggle();
    });
});

基本上，您使用 jQuery 而不是 $ 来启动 jQuery 文档就绪函数，并且需要 $ 作为参数。由于 jQuery 对象作为参数传递给此函数，因此您应该能够将 jQuery 与您命名的参数一起使用。

希望对您有所帮助 ;)

编辑

现在很有魅力，

使用这些样式来提高可见度...

#newsletter-container {
    padding: 10px 5px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 970px;
    height: 500px;
    z-index: 9999;
    margin: auto;
    background: #fff;
    display: none;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25);
    box-sizing: border-box;
    overflow: auto;
}

Answer 8

您只需要修复 jQuery 的语法错误并需要在您的页面中加载 jQuery。检查下面的工作代码片段。

    $(document).ready(function() {
        $('#menu-item-63>a').click(function(){
            $('#newsletter-container').toggle();
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-bottom-menu" class="menu"><li id="menu-item-56"><a href="https://staging.venusanddiamonds.com/contact">Contact Us</a></li>
    <li id="menu-item-63"><a href="#">Subscribe</a></li>
    <li id="menu-item-55"><a href="https://staging.venusanddiamonds.com/faq">FAQ</a></li>
    <li id="menu-item-54"><a href="https://staging.venusanddiamonds.com/privacy-terms">Privacy &amp; Terms</a></li>
    <li id="menu-item-53"><a href="https://staging.venusanddiamonds.com/news-events">News &amp; Events</a></li>
</ul>

<div id="newsletter-container">
    <div id="newsletter">
        ...etc...
    </div>
</div>

Answer 9

您需要将“$”替换为 'jQuery'。然后它将起作用，并将您的代码放在 wp_head() 部分下面。

然后试试这个代码：

jQuery(document).ready(function() {
     jQuery('#menu-item-63').find('a').click(function(e){
          e.preventDefault(); // Use this to stop the default behavior of anchor.
         jQuery('#newsletter-container').toggle();
     }); // Here
 });

注意：没有 ID 为“#newsletter-container”的元素。所以请确保您使用的是正确的元素 ID。

Answer 10

解决您问题的三个选项：

jQuery 冲突

  $.noConflict();
  jQuery(document).ready(function() {
      jQuery('#menu-item-63 > a').click(function(){
         jQuery('#newsletter-container').toggle();
      });
  });

动态创建menu-item-63然后使用

  $(document).click('#menu-item-63 > a', function() {
         $('#newsletter-container').toggle();
      });
  });

编码错误

  $(document).ready(function() {
      $('#menu-item-63 > a').click(function(){
         $('#newsletter-container').toggle();
      });
  });

jQuery 切换并没有真正起作用

jQuery toggle is not really working

jquery

toggle