为什么我的 Javascript toggleClass 代码不起作用？

Question

我试图在单击时将 .open class 添加到 div。它目前无法正常工作，我不确定为什么。

这是我的 JS

(function ($) {
    // sticky footer form class toggle on click
    $(".nb-form .form-header").on("click", function () {
        $(".nb-form").toggleClass("open");
    });

这是我的HTML

<div class="nb-form">
    <div class="form-header">
        <p class="title">Request a Quote</p>
        <img src="https://soldaf.ca/wp-content/uploads/2020/11/Andrew-headshot-e1606168346405.jpg" alt="Andrew Foster" class="user-icon">
    </div>    

    <div class="form-content">
        <p class="message">Send us a message or give us a call at <span class="d-inline-block">(403) 915-6195.</span></p>   
        <?php echo do_shortcode( '[[contact-form-7 id="4545" title="Contact form 1"]]' ); ?>
    </div>
  </div>

作为参考，我正在尝试准确复制本网站右下角“有问题”小部件的情况 https://soldaf.ca/

谢谢，

Answer 1

问题似乎是因为您用于包含 jQuery 代码的语法是立即调用的函数表达式 (IIFE)，而不是 jQuery document.ready 处理程序。这意味着您的代码在 DOM 加载之前是运行，因此您尝试绑定事件处理程序的元素尚不存在。

要解决此问题，请使用标准 jQuery document.ready 事件处理程序：

jQuery($ => {
  // sticky footer form class toggle on click
  $(".nb-form .form-header").on("click", () => {
    $(".nb-form").toggleClass("open");
  });
});

/* Note this CSS is only for demo purposes and isn't relevant to the issue */
img { width: 50px; }
.nb-form .form-content { display: none; }
.nb-form.open .form-content { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nb-form">
  <div class="form-header">
    <p class="title">Request a Quote</p>
    <img src="https://soldaf.ca/wp-content/uploads/2020/11/Andrew-headshot-e1606168346405.jpg" alt="Andrew Foster" class="user-icon" />
  </div>

  <div class="form-content">
    <p class="message">Send us a message or give us a call at <span class="d-inline-block">(403) 915-6195.</span></p>
    <?php echo do_shortcode( '[[contact-form-7 id="4545" title="Contact form 1"]]' ); ?>
  </div>
</div>

Answer 2

尝试使用此代码

<div class="nb-form">
    <div class="form-header">
        <p class="title">Request a Quote</p>
        <img src="https://soldaf.ca/wp-content/uploads/2020/11/Andrew-headshot-e1606168346405.jpg" alt="Andrew Foster" class="user-icon">
    </div>    

    <div class="form-content">
        <p class="message">Send us a message or give us a call at <span class="d-inline-block">(403) 915-6195.</span></p>   
        <?php echo do_shortcode( '[[contact-form-7 id="4545" title="Contact form 1"]]' ); ?>
    </div>
</div>

Jquery

$(".nb-form .form-header").on("click", function () {
    $(".nb-form .form-content").toggleClass("open");
    // or else you can use toggle method
    $(".nb-form .form-content").toggle()
});

为什么我的 Javascript toggleClass 代码不起作用？

Why is my Javascript toggleClass code not working?

html

javascript

jquery

contact-form-7