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