jQuery切换，其中包含链接

Question

我有以下代码：

<script type="text/javascript" src="/jquery-1.7.2.min.js"></script>
<script type="text/javascript"> 
    $(function() { 
        $('#toggle1').click(function() { 
            $('.toggle1').toggle();
            return false;
        });
    }); 
</script> 

<a href="#" id="toggle1" style="text-decoration:none;color:black;">Text Before <a href="http://www.google.com">link</a> Text After</a><br /><br />

<div class="toggle1" style="display:none;">More Text Here</div>

这样做的问题是，它不是有效的HTML，即使toggle1链接和toggle1链接内部的链接都可以使用，并且“之前的文本”是可单击的，但“之后的文本”却不可单击且不会进行切换。

您对如何解决它有什么建议，以便也可以单击“文本后”，从而使切换有效吗？

谢谢你们！

Answer 1

浏览器将自动在您的代码中添加一个结束标记以使其有效。 这就是为什么您无法单击“之后的文字”的原因。 请通过一些元素检查器进行检查，然后您可以了解发生了什么。

查看您的代码如何在浏览器中呈现

那么，为什么不能这样呢？

HTML

<a href="#" class="toggler" style="text-decoration:none;color:black;">Text Before</a>
<a href="http://www.google.com">link</a>
<a href="#" class="toggler" style="text-decoration:none;color:black;">Text After</a><br /><br />

<div class="toggle1" style="display:none;">More Text Here</div>

JAVASCRIPT

$(function() { 
    $('.toggler').click(function() { 
        $('.toggle1').toggle();
        return false;
    });
});