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

您遇到语法错误。点击事件和doc ready尚未正确关闭：

     $(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 2

看起来你在WordPress中使用jQuery ......

在WordPress $中不会开箱即用以避免冲突......

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

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

基本上，您使用jQuery而不是$启动jQuery doc ready函数，并且需要$作为参数。由于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 3

存在语法错误。它应该是：

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

Answer 4

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

＆＃13;

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

＆＃13;

public class MyFragmentActivity extends FragmentActivity

＆＃13;

Answer 5

您需要将'$'替换为'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 6

解决问题的三个选项：

jQuery Confilct

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

动态创建菜单项-63然后使用

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

编码错误

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

Answer 7

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

工作代码：

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

Answer 8

检查您的ready和click活动是否有效。

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

Answer 9

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

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

“订阅”链接也存在问题。

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

默认情况下，链接会执行您希望它执行的操作。您将href属性设置为“＃”，因此当您点击它时，浏览器将加载网址“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 10

如果您的网站中引用了许多JavaScript库/插件，如上所述，您可能会遇到jQuery冲突。你可以尝试更换＆＃34; $＆＃34;与＆＃34; jQuery＆＃34;如下所示：

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

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

jQuery切换并没有真正起作用

10 个答案: