单个DIV中的2个onClick事件

Question

我想要实现的目标非常简单。我有一个带有展开/折叠图标和问号图标的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();
})

这是我的小提琴：http://jsfiddle.net/oampz/x7k9B/4/

任何帮助表示感谢。

Answer 1

这是一个更新的问题，修复了问题：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();
})

答案 1 :(得分：1)

试试这段代码

<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>

Answer 2

试试这段代码

<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>