[英]How to properly prevent bubbling when using toggle()?
我尝试在大于768px时显示页面加载时的列表,但如果小于768px则隐藏它们,并在单击标题时显示它们。
它可以正常工作,但在调整窗口大小后无法正常工作,我不知道为什么会这样吗? 有什么建议吗?
我应该如何正确处理冒泡?
HTML:
<nav>
<h3 class="nav__title">first</h3>
<div class="links">
<ul>
<li><a href="#">first one</a></li>
<li><a href="#">first two</a></li>
<li><a href="#">first three</a></li>
</ul>
</div>
</nav>
<nav>
<h3 class="nav__title">second</h3>
<div class="links">
<ul>
<li><a href="#">second one</a></li>
<li><a href="#">second two</a></li>
<li><a href="#">second three</a></li>
</ul>
</div>
</nav>
JS:
(function () {
function footerLinks() {
if ($(window).width() < 768) {
$(".links").hide();
$(".nav__title").on("click", function (e) {
e.preventDefault();
$(this).next(".links").toggle("fast");
});
} else {
$(".links").show();
}
}
footerLinks();
$(window).resize(function () {
footerLinks();
});
}());
我认为这就是您想要的,每次调整窗口大小时,您都要添加事件处理程序:
(function () {
$(".nav__title").on("click", function (e) {
e.preventDefault();
// Drop out of function if window is big enough
if( $(window).width() >= 768 ){ return; }
$(this).next(".links").toggle("fast");
});
function footerLinks() {
if ($(window).width() < 768) {
$(".links").hide();
} else {
$(".links").show();
}
}
footerLinks();
$(window).resize(function () {
footerLinks();
});
}());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.