jQuery在附加到函数的div中停止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-index 来瞄准链接，希望它在 div 隐藏无济于事之前首先是可点击的，我试图找出一种方法让显示的 div 不再隐藏它，但我无法弄清楚系绳的结束。

有没有办法在 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