Javascript 单个DIV中的2个onClick事件

我想要达到的目标很简单。我有一个带有展开/折叠图标和问号图标的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>

$(".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();
})

这是我的小提琴：

---

感谢您的帮助。

这里有一个更新的小提琴，修复了这个问题：

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();
})

---

这里有一个更新的小提琴，修复了这个问题：

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();
})

试试这个代码

<div class="toggle_head Header">
    <label id="toggle_head">
        <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>
<script>
    $(document).ready(function () {
        $(".toggle_body").hide();
        $(".collapse").hide();
        $(".helpBody").hide();

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

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

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

扩大
接近
来自展开/折叠图标点击的信息-Lorem ipsum Door sit amet，Adipising elit，sed do eiusmod Temporal Incidedut ut Labor and dolore magna aliqua。我们的工作是最低限度的，我们的工作是实践性的
来自帮助图标单击的信息-Lorem ipsum Door sit amet，Concertetur Adipising elit，sed do eiusmod Temporal Incidedut ut Labor and dolore magna aliqua。我们的工作是最低限度的，我们的工作是实践性的
$（文档）.ready（函数（）{
$（“.toggle_body”）.hide（）；
$（“.collapse”）.hide（）；
$（“.helpBody”）.hide（）；
$（“#切换#头”）。单击（函数（）{
var$this=$（this）；
$（“.toggle_body”）。滑动切换（“slow”，函数（）{
$this.find（'img.expandCollpse'）.toggle（）；
});
});
$（“.showHelp”）。单击（函数（）{
var$this=$（this）；
$（'.helpBody'）。滑动切换（“慢速”）；
});
$（“.btn”）。单击（函数（）{
var$this=$（this）；
$this.closest（“.toggle_body”）.slideUp（）；
})
});

试试这段代码

<div class="toggle_head Header">
    <label id="toggle_head">
        <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>
<script>
    $(document).ready(function () {
        $(".toggle_body").hide();
        $(".collapse").hide();
        $(".helpBody").hide();

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

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

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

扩大
接近
来自展开/折叠图标点击的信息-Lorem ipsum Door sit amet，Adipising elit，sed do eiusmod Temporal Incidedut ut Labor and dolore magna aliqua。我们的工作是最低限度的，我们的工作是实践性的
来自帮助图标单击的信息-Lorem ipsum Door sit amet，Concertetur Adipising elit，sed do eiusmod Temporal Incidedut ut Labor and dolore magna aliqua。我们的工作是最低限度的，我们的工作是实践性的
$（文档）.ready（函数（）{
$（“.toggle_body”）.hide（）；
$（“.collapse”）.hide（）；
$（“.helpBody”）.hide（）；
$（“#切换#头”）。单击（函数（）{
var$this=$（this）；
$（“.toggle_body”）。滑动切换（“slow”，函数（）{
$this.find（'img.expandCollpse'）.toggle（）；
});
});
$（“.showHelp”）。单击（函数（）{
var$this=$（this）；
$（'.helpBody'）。滑动切换（“慢速”）；
});
$（“.btn”）。单击（函数（）{
var$this=$（this）；
$this.closest（“.toggle_body”）.slideUp（）；
})
});

它似乎对我很管用。你在用什么浏览器？嗯，有两个隐藏的div-toggle_body和helpBody。只显示了一个实体。。检查内容。您的代码是正确的。不，当用户点击toggle_head时，toggle_body应该会显示出来。当用户单击showHelp时，helpBody应该显示非常不对称的代码。您有两个相同的元素（按钮），它们以不同的方式处理。重新设计逻辑，简化它，它就会起作用。回答一个问题，点击时应该做出什么反应，a是否有必要捕捉一个事件？这对我来说似乎很好。你在用什么浏览器？嗯，有两个隐藏的div-toggle_body和helpBody。只显示了一个实体。。检查内容。您的代码是正确的。不，当用户点击toggle_head时，toggle_body应该会显示出来。当用户单击showHelp时，helpBody应该显示非常不对称的代码。您有两个相同的元素（按钮），它们以不同的方式处理。重新设计逻辑，简化它，它就会起作用。回答一个问题，点击时应该做出什么反应，a是否有必要捕捉事件？正确！主要问题是“.Toggle_head”中的代码jscript在单击“帮助”按钮时总是打开您不需要的信息。这段代码最终覆盖了“帮助”按钮。此技巧是纠正此问题的方法。@jdanyou-此处更新了fiddle:我遇到的问题是，当单击问号图标时，两个部分都在切换。@jdanyou-谢谢。似乎只有当helpBody div位于toggle_body div之后时，该解决方案才起作用。。这可以反转为helpBody在toggle_body之前吗？给你：（第一个扩展器有helpBody，然后是toggleBody。第二个扩展器有这些反转。两者都使用相同的jsCorrect！主要问题是“.toggle_head”中的代码jscript单击“帮助”按钮时，始终打开不需要的信息。此代码最终覆盖了“帮助”按钮。此提示是纠正此问题的方法。@jdanyou-此处更新了fiddle:我遇到的问题是，当单击问号图标时，两个部分都在切换。@jdanyow-谢谢。似乎只有当lpBody div在toggle_body div之后。这可以反转为helpBody在toggle_body之前吗？给你：（第一个扩展器有helpBody，然后是toggleBody。第二个扩展器有这些反转。两者都使用相同的js