JQuery остановка URL нажмите на ДИВОМ приложенный функционировать

Question

У меня есть DIV указано как этот

<div class="clickformore"> 
    <h3>Business in<br>action</h3> 
    <div class="foundoutmore"> 
    <div class="uparrow"></div> 
    <div class="underarrow"> 
     <p>Develop critical and problem solving skills faculties by investigating challenges faced by business leaders and to practice the skills to devise and implement practical solutions.<br><a href="http://www.ncl.ac.uk/postgraduate/modules/module/NBS8490/" target="_blank">http://www.ncl.ac.uk/postgraduate/modules/module/NBS8490/</a></p> 
    </div> 
    </div> 
</div> 

и где только h3 видно, а все остальное скрыто. jQuery, который показывает, что обнаружено больше div, у которого есть стрелка и текстовое поле, что делает его похожим на речевой пузырь.

Но когда пользователь нажимает на ссылку в скрытом div, когда отображается, он снова скрывается, не открывая ссылку.

$(".clickformore").click(function(e){ 
    e.preventDefault(); 
    if ($(this).find(".foundoutmore").css('display') == 'none') { 
     $(".foundoutmore").css("display","none"); 
     $(this).find(".foundoutmore").css("display","inherit"); 
    } else { 
     $(".foundoutmore").css("display","none"); 
    } 
}); 

Я попытался прицеливание по ссылке с помощью CSS делает Z-индекс надеясь, что это будет первым быть интерактивным до ДИВ спрятался без толка, я пытался выяснить способ, чтобы сделать показ не скрыть деление с это снова, но я не могу понять это и конец троса.

Есть ли способ, которым я могу сделать ссылку кликабельнее перед скрытием div?

Answer 1

Используйте этот братан ..

$(".foundoutmore").css("display","none"); 
$("h3").click(function(e){ 
    e.preventDefault(); 

    if($(this).next().css('display')=='none'){ 
     $(this).next().css("display","inherit"); 
    } else { 
     $(".foundoutmore").css("display","none"); 
    } 
}); 

DEMO

Answer 2

<div class="clickformore"> 

    <h3>Business in<br>action</h3> 

    <div class="foundoutmore hidden"> 
     <div class="uparrow"></div> 
     <div class="underarrow"> 
      <p>Develop critical and problem solving skills faculties by investigating challenges faced by business leaders and to practice the skills to devise and implement practical solutions. 
       <br><a href="http://www.ncl.ac.uk/postgraduate/modules/module/NBS8490/" target="_blank">http://www.ncl.ac.uk/postgraduate/modules/module/NBS8490/</a> 
      </p> 
     </div> 
    </div> 
</div> 




$(".foundoutmore").hide(); 

или добавить

.hidden { 
    display: none; 
} 

к вашему CSS тогда:

$(".clickformore").on('click', 'h3', function(e){ 
    e.preventDefault(); 
    var more = $(this).next('.foundoutmore'); 
    more.toggle(); 
}); 

Demo