gpt4 book ai didi

javascript - 单个 DIV 内有 2 个 onClick 事件

转载 作者:行者123 更新时间:2023-11-28 15:45:09 28 4
gpt4 key购买 nike

我想要实现的目标非常简单。我有一个带有展开/折叠图标和问号图标的 div。当用户单击这些图标之一时,相应的隐藏 div 应向下滑动。

当用户单击展开/折叠图标而不是问号时,此功能有效。

HTML:

<div class="toggle_head Header">
<label>
<img class="expandCollpse" src="http://png-1.findicons.com/files/icons/2338/reflection/128/expand_alt.png" height="30px;" />
<img class="hide expandCollpse" src="http://png-2.findicons.com/files/icons/2338/reflection/128/collapse_alt.png" height="30px;" />
</label>
<label>Expand</label>
<label class="showHelp">
<img src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" height="30px;" />
</label>
</div>
<div class="toggle_body">
<button type="button" class="btn" style="float:right;">Close</button>
<label>**Info from expand/collapse icon click** - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</label>
</div>
<div class="helpBody">
<label>**Info from HELP icon click** - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</label>
</div>

jQuery:

$(".toggle_body").hide();
$(".collapse").hide();
$(".helpBody").hide();

$(".toggle_head").click(function () {
var $this = $(this);
$this.next(".toggle_body").slideToggle("slow", function () {
$this.find('img.expandCollpse').toggle();
});
});

$(".showHelp").click(function () {
var $this = $(this);
$this.find('div.helpBody').slideToggle("slow");
});

$(".btn").click(function () {
var $this = $(this);
$this.closest(".toggle_body").slideUp();
})

这是我的 fiddle :http://jsfiddle.net/oampz/x7k9B/4/

感谢任何帮助。

最佳答案

这是一个已修复问题的更新 fiddle :http://jsfiddle.net/x7k9B/5/

div 正在消耗对帮助图标的点击。

这是更新后的代码:

$(".toggle_body").hide();
$(".collapse").hide();
$(".helpBody").hide();

$(".toggle_head").click(function (event) {
var $this = $(this);

// is the click event's target the showHelp label?
if ($(event.target).closest('label').hasClass('showHelp')) {
$(".helpBody").slideToggle("slow", function () {
$this.find('img.expandCollpse').toggle();
});
return;
}

// click event occurred somewhere else on the header div- not on showHelp...
$this.next(".toggle_body").slideToggle("slow", function () {
$this.find('img.expandCollpse').toggle();
});
});

$(".btn").click(function () {
var $this = $(this);
$this.closest(".toggle_body").slideUp();
})

关于javascript - 单个 DIV 内有 2 个 onClick 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22632645/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com