如何根据点击哪个父Jquery打开链接

I am designing my FAQs page for that i have used questions as links and answers in paragraph tags. I want to show answer of its respective question when its question link is clicked, i have coded till now and its working perfect.

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

My problem is that i have some answers where i have used links as well. so when i click such question link it shows its answer (Fine) but when i click the link in answer it hides the whole answer which i don't want. i want to open that link in new tab, and when i click question again it should hide that answer.

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

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

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

小提琴

5 个解决方案

#1

Just check if the target is not a tag like this:

只需检查目标是否不是这样的标记：

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

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

Update

更新

In the below fiddle the code close the opened question while it show the clicked.

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

Hide the opened answer using $('.ans-pop:visible').hide(500);

使用$（'。ans-pop：visible'）隐藏打开的答案.hide（500）;

Important I replaced the id="ans-pop" to class="ans-pop" because id attribute must be unique. Especially in this case.

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

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

#2

Add a class on your link and stop the event propagation on the click of your link.

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

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


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

DEMO

#3

I think you want this, try to replace your code with this

我想你想要这个，尝试用这个代替你的代码

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

#4

Use e.stopPropagation(); in the anchors you want to click:

使用e.stopPropagation（）;在您要单击的锚点中：

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

Demo

演示

#5

I would do it like this:

我会这样做：

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

Seeing as you're using links, I've added the ID of the answer as the href so the questions and answers are linked, even without the JS.
看到你正在使用链接，我已经将答案的ID添加为href，因此问题和答案是相互关联的，即使没有JS。
In jQuery, the href is then grabbed from the link and used to select and show/hide the answer div
在jQuery中，然后从链接中抓取href并用于选择和显示/隐藏答案div
External links work as they normally would, as the jQuery code doesn't affect them in any way
外部链接正常工作，因为jQuery代码不会以任何方式影响它们

#1