javascript - 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 链接内的链接都可以工作，并且“Text Before”是可点击的，“Text After”是不可点击的并且不会切换。

你有什么建议如何修复它，以便“文本之后”也可以点击，以便切换可以工作？

谢谢你们！

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