toggleclass() 以一种奇怪的方式工作，在语句使其工作后立即出错

所以我是这个jquery东西的新手，不得不做一个轻量级代码来隐藏和显示一些基于用户点击的ul。所以我创建了具有显示：块的下拉块类。下面的 jquery 使其在 display： none 和 display： block 之间切换。所以这是我的代码：

jQuery('.flinks span').click(function() {
jQuery(this).closest('.flinks').find('ul').toggleClass('dropdownBlock');
//hello;
});

现在奇怪的是，如果我取消注释 hello 并故意犯错误，代码就可以工作了。没有它，代码确实有效，但类仍然为空。是jquery中的错误还是我做错了什么，或者我完全愚蠢。必须说这样的事情让我彻夜难眠。

编辑这是 HTML：

<div id="FC2Bg">
<div id="FC2">
<div class="flinks">
<span ><p>Our Extended Services<a>&rsaquo;</a></p></span>
<p class="ft-wid-det"></p>
<ul>
<li class="f-box f1">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">A</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">H</a></li>
<li><a href="#">R</a></li>
</ul>
</li>
<li class="f-box f2">
<ul>
<li><a href="#">C</a></li>
<li><a href="#">P</a></li>
<li><a href="#">E</a></li>
<li><a href="#">E</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
</ul>
</li>
<li class="f-box f3">
<ul>
<li><a href="#">R</a></li>
<li><a href="#">R</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">P</a></li>
</ul>
</li>
<li class="f-box f4">
<ul>
<li><a href="#">T</a></li>
<li><a href="#">D</a></li>
<li><a href="#">D</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
<li><a href="#">A</a></li>
</ul>
</li>
<li class="f-box f5">
<ul>
<li><a href="#">T</a></li>
<li><a href="#">D</a></li>
<li><a href="#">D</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
<li><a href="#">A</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

我会给你一个最简单的答案。不要添加任何具有显示无和显示块的类。这是 jsFiddle 工作 https://jsfiddle.net/kL1u830b/我对您的 HTML 进行了一些微小的调整在这里

<div id="FC2Bg">
<div id="FC2">
<div class="flinks">
<span ><p>Our Extended Services<a>&rsaquo;</a></p></span>
<p class="ft-wid-det"></p>
<ul class="flinks-ul" style="display: none;">
<li class="f-box f1">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">A</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">H</a></li>
<li><a href="#">R</a></li>
</ul>
</li>
<li class="f-box f2">
<ul>
<li><a href="#">C</a></li>
<li><a href="#">P</a></li>
<li><a href="#">E</a></li>
<li><a href="#">E</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
</ul>
</li>
<li class="f-box f3">
<ul>
<li><a href="#">R</a></li>
<li><a href="#">R</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">P</a></li>
</ul>
</li>
<li class="f-box f4">
<ul>
<li><a href="#">T</a></li>
<li><a href="#">D</a></li>
<li><a href="#">D</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
<li><a href="#">A</a></li>
</ul>
</li>
<li class="f-box f5">
<ul>
<li><a href="#">T</a></li>
<li><a href="#">D</a></li>
<li><a href="#">D</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
<li><a href="#">A</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

只需将一个类添加到要切换显示的"ul"即可。并默认显示无。现在的jQuery代码：

$('.flinks span').click(function(){
$(this).siblings(".flinks-ul").toggle();
});

jQuery的"切换"方法也做了同样的事情。如果指定的元素显示为无。它会将其更改为阻止。如果它有块。它会将其更改为无。这样它减少了你的css样式。什么时候你可以使用jQuery自己的方法来解决你的问题。

代码在没有您的hello或您的hello的情况下正常工作(控制台中出现错误hello，尽管通过切换类来完成它的工作(。

类dropdownBlock被附加到ul(如果不存在(，如果它在那里，则会被删除(切换(。所以没有异常行为。

jQuery('.flinks span').click(function() {
jQuery(this).closest('.flinks').find('ul').toggleClass('dropdownBlock');
// hello;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="FC2Bg">
<div id="FC2">
<div class="flinks">
<span ><p>Our Extended Services<a>&rsaquo;</a></p></span>
<p class="ft-wid-det"></p>
<ul>
<li class="f-box f1">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">A</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">H</a></li>
<li><a href="#">R</a></li>
</ul>
</li>
<li class="f-box f2">
<ul>
<li><a href="#">C</a></li>
<li><a href="#">P</a></li>
<li><a href="#">E</a></li>
<li><a href="#">E</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
</ul>
</li>
<li class="f-box f3">
<ul>
<li><a href="#">R</a></li>
<li><a href="#">R</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">P</a></li>
</ul>
</li>
<li class="f-box f4">
<ul>
<li><a href="#">T</a></li>
<li><a href="#">D</a></li>
<li><a href="#">D</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
<li><a href="#">A</a></li>
</ul>
</li>
<li class="f-box f5">
<ul>
<li><a href="#">T</a></li>
<li><a href="#">D</a></li>
<li><a href="#">D</a></li>
<li><a href="#">C</a></li>
<li><a href="#">W</a></li>
<li><a href="#">A</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

在这里工作：https://jsfiddle.net/usmanmunir/9brx3s75/4/

$('.flinks span').click(function() {
$(this).closest('.flinks').find('ul').toggleClass('dropdownBlock');
console.log('dsd')
//hello;
});

相关内容

最新更新

热门标签：