如何基于单击哪个父项打开链接

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

小提琴

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

演示

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代码不会以任何方式影响它们