jQuery 停止 url 点击 div 附加功能

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中的link时，它会再次隐藏，而不会打开link。

$(".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 瞄准 link 做一个 z-index 希望它在 div 隐藏之前首先可以点击但无济于事，我试图弄清楚想出一种方法让显示 div 不再隐藏它，但我无法弄清楚并结束系绳。

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

jQuery 停止 url 点击 div 附加功能

jQuery stopping url click in div attached to function

html

jquery

show-hide