如何根据单击Jquery的父级打开链接

How to open links based on which parent is clicked Jquery

本文关键字：链接 何根 单击 Jquery      更新时间：2023-09-26

我正在设计我的FAQ页面，我在段落标记中使用了问题作为链接和答案。当它的问题链接被点击时，我想显示它各自问题的答案，我已经编码到现在，它工作得很完美。

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

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="answers-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="answers-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;
});

小提琴

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

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

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

更新

在下面的代码中，关闭打开的问题，同时显示单击的。

使用$('.ans-pop:visible').hide(500); 隐藏打开的答案

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

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

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

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

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

演示

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

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

在要单击的锚点中使用e.stopPropagation();：

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

演示

我会这样做：

<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="answerswer_1" class="answerswer">
        <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="answerswer_2" class="answerswer">
        <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代码不会以任何方式影响它们
相关文章：