Question

我正在设计我的常见问题解答页面，因为我已将问题用作段落标记中的链接和答案。我想在点击问题链接时显示其各自问题的答案，我已经编码到现在并且它的工作完美。

我的问题是我有一些答案，我也使用过链接。所以，当我点击这样的问题链接时，它会显示其答案（精细），但是当我点击答案中的链接时，它隐藏了我不想要的整个答案。我想在新标签页中打开该链接，当我再次点击问题时，它应隐藏该答案。

HTML

<div class="pageContents">
  <div class="list_Q" id="Q3">
    <a class="que" href="#">
      <h5><strong>Q) </strong>
        How can I test EPX before I buy it? 
      </h5>
    </a>
    <p id="ans-pop"><strong>A) </strong>Demo link for EPX is <a target="_blank" href="http://google.com/" class="link_read">Here </a></p>
  </div>
  <div class="list_Q" id="Q15">
    <a class="que" href="#">
      <h5>
        <strong>Q) </strong>How can I create Endicia account I'd? 
      </h5>
    </a>
    <p id="ans-pop"><strong>A) </strong>Visit <a target="_blank" href="http://www.endicia.com/" class="link_read">Endicia</a>&nbsp;for 
      creating Endicia account.
    </p>
  </div>
</div>

CSS

#ans-pop {
  display: none;
}

.list_Q {
  BORDER-BOTTOM: #333333 1px dotted;
  MARGIN-BOTTOM: 5px;
}

.list_Q H5 {
  PADDING-BOTTOM: 5px;
  PADDING-LEFT: 5px;
  PADDING-RIGHT: 5px;
  MARGIN-BOTTOM: 0px;
  BACKGROUND: #ededed;
  COLOR: #d80d0d;
  FONT-SIZE: 12px;
  FONT-WEIGHT: normal;
  PADDING-TOP: 5px;
}

.list_Q P {
  PADDING-BOTTOM: 5px;
  PADDING-LEFT: 5px;
  PADDING-RIGHT: 5px;
  COLOR: #333333;
  FONT-SIZE: 12px;
  PADDING-TOP: 5px;
}

Jquery的

$('.list_Q').click(function () {
  var status = $(this).attr('id');
  var fix = '#' + status + ' #ans-pop';

  if ($(fix).is(":not(:visible)")) {
    $(fix).show(500); 
  } else {
    $(fix).hide(500);  
  }
  return false;
});

fiddle

Answer 1

只需检查target是否不是a标记，如下所示：

if ($(event.target).is('a')) {
   return;
}

http://jsfiddle.net/P45bE/129/

<强>更新

在下面的小提琴中，代码会在显示已点击的内容时关闭已打开的问题。

使用$('.ans-pop:visible').hide(500);

隐藏已打开的答案

重要我将id="ans-pop"替换为class="ans-pop"，因为id属性必须是唯一的。特别是在这种情况下。

http://jsfiddle.net/P45bE/132/

Answer 2

在链接上添加一个类，并在点击链接时停止事件传播。

<a target="_blank" class="test" href="http://www.endicia.com/" class="link_read">Endicia</a>


$('.test').click(function (e){
e.stopPropagation();
});

DEMO

Answer 3

我想你想要这个，尝试用这个

替换你的代码

$('.list_Q a').click(function (){
var status = $(this).parent().attr('id');

Answer 4

在要点击的主播中使用e.stopPropagation();：

$("a[href!=#]").click(function (e) {
    e.stopPropagation();
});

Demo

Answer 5

我会这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
    <a href="#answer_1" class="question"><h5><strong>Q) </strong> Question number 1 </h5></a>
    <div id="answer_1" class="answer">
        <p><strong>A)</strong> Answer, with an <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
    </div>
</div>
<div class="faq">
    <a href="#answer_2" class="question"><h5><strong>Q) </strong>Here's another question</h5></a>
    <div id="answer_2" class="answer">
        <p><strong>A)</strong> Another answer, with another <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
    </div>
</div>

$('.question').on('click', function(){
  var href = $(this).attr('href');
  $(href).toggle();
  return false;
});

.answer {
  display:none;
}

看到你正在使用链接，我已经将答案的ID添加为href，因此问题和答案是相互关联的，即使没有JS。
在jQuery中，然后从链接中抓取href并用于选择和显示/隐藏答案div
外部链接正常工作，因为jQuery代码不会以任何方式影响它们

如何根据点击的父项打开链接Jquery

5 个答案: