标题中带有javascript链接的JQuery slidetoggle div不会触发答案

【问题标题】：JQuery slidetoggle div with javascript link in header wont fire标题中带有javascript链接的JQuery slidetoggle div不会触发
【发布时间】：2014-02-07 12:24:42
【问题描述】：

我有一个简单的可折叠 div（内容），当用户单击另一个 div（标题）时，它会展开或折叠。

我还有一个锚标记，它在标题 div 中调用 javascript 函数。

但是，当我单击链接时，内容 div 会展开或折叠，而不是 javascript 触发。

如何做到这一点，如果用户点击链接，javascript 会触发，但如果用户点击标题中的任何其他位置，内容会展开或折叠？

我确信它非常简单，但对 JQuery 了解不多。

谢谢。

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="../Scripts/jquery-1.10.2.js"></script>

<script src="../Scripts/jquery-1.10.2.min.js"></script>

<style type="text/css">
    .container
    {
        width: 600px;
    }
    .content
    {
        display:            none;
        padding:            10px;
        border-top:         1px;
        border-top-color:   #cccccc;
        border-top-style:   solid;
        border-left:        1px;
        border-left-color:  #999999;
        border-left-style:  solid;
        border-right:       1px;
        border-right-color: #999999;
        border-right-style: solid;
    }
    .header
    {
        height:             30px;
        color:              #336699;
        padding-left:       10px;
        padding-top:        5px;
        padding-bottom:     5px;
        background-color:   #f8f8f8;
        border-top:         1px;
        border-top-color:   #999999;
        border-top-style:   solid;
        border-left:        1px;
        border-left-color:  #999999;
        border-left-style:  solid;
        border-right:       1px;
        border-right-color: #999999;
        border-right-style: solid;
    }
    .headerContentTitle 
    {
        width:              480px;
        float:              left;
    }
    .headerContentLink 
    {
        width:              80px;
        float:              left;
    }
    .headerContentIcon 
    {
        float:              left;
    }
    .footer
    {
        border-bottom:          1px;
        border-bottom-color:    #999999;
        border-bottom-style:    solid;
        margin-bottom:          5px;
    }

</style>

<script type='text/javascript'>
    //<![CDATA[

    $(window).load(function () {
        function slide() {
            $(this).parent().find(".content").slideToggle("fast");

            var $img = $(this).find(".expImage");
            if ($img.attr("src") == "/Images/Expand.png") {
                $img.attr("src", "/Images/Collapse.png");
            }
            else {
                $img.attr("src", "/Images/Expand.png");
            }
            return false;
        }
        //$(".header").click(slide);
    });

    //]]>  
</script>


<script type="text/javascript">

    function SelectAllClicked(HeaderID)
    {
        alert(HeaderID);
    }

</script>

<form id="form1" runat="server">

<div class="container">
    <div class="header">
        <div class="headerContent">
            <div class="headerContentTitle">This is the first header</div>
            <div class="headerContentLink"><a href="javascript:SelectAllClicked('Header Value')">Select all</a></div>
            <div class="headerContentIcon"><img class="expImage" src="/Images/Expand.png" width="20" height="20" border="0" alt="" /></div>
        </div>
    </div>
    <div class="content">This is the first content</div>
    <div class="footer"></div>
</div>

</form>

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

Use this, It will work :)


<script type='text/javascript'>
     $(document).ready(function () {
        $(".header").click(function(e){
                if(e.target.nodeName != 'A'){
                $(this).parent().find(".content").slideToggle("fast");

                var $img = $(this).find(".expImage");
                if ($img.attr("src") == "/Images/Expand.png") {
                    $img.attr("src", "/Images/Collapse.png");
                }
                else {
                    $img.attr("src", "/Images/Expand.png");
                }
                return false;           
            }
        });

    }); 
</script>

【讨论】：

【解决方案2】：

简化的“CreativeDeep”答案

    //<![CDATA[
    $(document).ready(function () {
        $(".header").click(function(e){
                if(e.target.nodeName != 'A'){
                $(this).parent().find(".content").slideToggle("fast");
            }
        });
    });
    //]]>

【讨论】：