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