首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Jquery SlideToggle,在特定情况下防止切换。

Jquery SlideToggle,在特定情况下防止切换。
EN

Stack Overflow用户
提问于 2013-04-25 07:26:29
回答 2查看 2.9K关注 0票数 0

所以我有一个H3,它有一个灰色的背景矩形。当您单击灰色背景中的任何位置时,特定的div执行slideToggle()。这个很好用。

现在,在这个H3中,我还有一个链接,它调用了一个执行某些任务的jquery函数。效果也很好。

但是我的问题是,因为链接在H3中,在它的函数执行之后,它也执行slideToggle(),因为我在H3中单击了某个位置。

因此,问题是,当我单击链接时,如何防止slideToggle()发生。我想我可以用旗子,但我希望有一种更优雅的方式。

任何帮助都将不胜感激。

代码

代码语言:javascript
运行
AI代码解释
复制
<h3 id="data_id"> 
    <a href="#" id="random_id" >Random</a>   
</h3>

<div id="data_div_id">
    // The data here is irrelevant to the issue at hand
</div>

Jquery

代码语言:javascript
运行
AI代码解释
复制
$('#data_id').click(function() {   
    $('#data_div_id').slideToggle('slow');      
}); 

$('#random_id').click(function(event) {
    // it does something irrelevant to the issue at hand
}); 
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-04-25 07:29:22

尝试跳过不希望事件发生的元素:

代码语言:javascript
运行
AI代码解释
复制
$('#data_id').click(function(event) {   
    if (event.target !== this)
        return;
    $('#data_div_id').slideToggle('slow');      
}); 

就像这样,只有#data_id才会触发切换,而且由于h3在div中,所以在单击它们时它也会被执行,但只会在实际单击容器时执行一次。

票数 2
EN

Stack Overflow用户

发布于 2013-04-25 07:27:50

您可以使用event.stopPropagation()来阻止事件冒泡。

jsFiddle在这里。

代码语言:javascript
运行
AI代码解释
复制
$('#data_id').click(function() {   
    $('#data_div_id').slideToggle('slow');      
}); 

$('#random_id').click(function(event) {
    event.stopPropagation();
}); 
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16218798

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档