如何解决如何使 jQuery 中的函数持续更长时间?
当我点击带有“箭头”类的按钮之一时,整个导航都消失了。 (除此之外,jquery 代码运行良好)。但为什么会发生呢?当我再次单击“.btn”而不是单击按钮时,我希望整个导航消失。箭头...
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
解决方法
问题在于 .arrow
元素嵌套在 .btn
元素中,因此单击箭头也是单击按钮。
为避免这种情况,您可以阻止由箭头触发的事件传播到按钮。
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.arrow').click(function(event) {
event.stopPropagation();
// Do other work that should happen
// because an arrow got clicked
console.log("You clicked on an arrow element.");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
您希望 .btn
仅在点击事件直接发生在齿轮图标上时才切换...
$('.btn').click(function(event) {
if($(event.target).is(".fa-cog")){
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
}
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
我也可以这么简单:
$('.fa-cog').click(function() {
$('.sidebar').toggleClass("show");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。