Question

我正在我的这个投资组合网站上工作 http://miketest.best/

，右上方的汉堡包.toggleClass()不会在每次点击时立即触发。似乎可以正常使用，但有时会出现一些怪异的延迟，但这并不能使其在每次单击时立即触发/切换（如果有的话）？

如果有用，这是Wordpress并将其用于我的自定义主题。

jQuery(document).ready(function($) {
  $('.cls').click(function(){
    console.log('fire');
    $('.open').toggleClass('oppenned');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  class="open">
	<span class="cls"></span>
	<span>
        <ul class="sub-menu ">
			<li onclick="slideTo('slide-2')">HOME
			</li>
			<li onclick="slideTo('slide-0')">ABOUT
			</li>
			<li onclick="slideTo('slide-1')">SERVICES
			</li>
			<li onclick="slideTo('slide-3')">PORTFOLIO
			</li>
            <li onclick="slideTo('slide-4')">CONTACT
			</li>
		</ul>
	</span>
	<span class="cls"></span>
</div>

Answer 1

您的触发器类为.cls，但是在您的DOM中您没有提供任何可见的内容来点击。我在字符串.cls中添加了click me，在.cls类中添加了一些样式。 查看此

jQuery(document).ready(function($) {
  $('.cls').click(function(){
    console.log('fire');
    $('.open').toggleClass('oppenned');
  });
});

.oppenned{
  background:#e3e3e3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  class="open">
    <span class="cls"></span>
    <span>

        <ul class="sub-menu ">
            <li onclick="slideTo('slide-2')">HOME
            </li>
            <li onclick="slideTo('slide-0')">ABOUT
            </li>
            <li onclick="slideTo('slide-1')">SERVICES
            </li>
            <li onclick="slideTo('slide-3')">PORTFOLIO
            </li>
      <li onclick="slideTo('slide-4')">CONTACT
            </li>
        </ul>
    </span>
    <span class="cls">click me</span>
</div>

Answer 2

您在非可见范围标记上使用了click事件。这就是单击事件无法正常工作的原因。只需在span标签内使用任何文本或任何元素即可。然后，您将看到它。当您看到可见元素时，它将起作用。

jQuery(document).ready(function($) {
    $('.cls').click(function() {
        console.log('fire');
        $(this).parents('.open').stop().toggleClass('oppenned');
    });
});

<style type="text/css">
    .oppenned{
      background:#e3e3e3;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  class="open">
    <span class="cls">something to click me</span>
    <span>
        <ul class="sub-menu ">
            <li onclick="slideTo('slide-2')">HOME</li>
            <li onclick="slideTo('slide-0')">ABOUT</li>
            <li onclick="slideTo('slide-1')">SERVICES</li>
            <li onclick="slideTo('slide-3')">PORTFOLIO</li>
            <li onclick="slideTo('slide-4')">CONTACT</li>
        </ul>
    </span>
    <span class="cls">something to click me</span>
</div>

Answer 3

而不是在click上应用.cls，请在.open上尝试。

jQuery(document).ready(function($) {
 $('.open').click(function(){
  console.log('fire');
  $('.open').toggleClass('oppenned');
 });
});

点击功能不会在每次点击时触发

3 个答案: