javascript - 如果 div 可见，则不执行任何操作，否则 .show

Question

我有这个 HTML 代码:

<ul>
   <li>
      <h1>
        <span id="span0">Lorem</span>
        <p id="p0">Lorem ipsum dolor sit amet,</p>
      </h1>
   </li>
   <li>
      <h1>
        <span id="span1">Lorem2</span>
        <p id="p1">Lorem ipsum dolor sit amet,</p>
      </h1>
   </li>
   <li>
      <h1>
        <span id="span2">Lorem3</span>
        <p id="p2">Lorem ipsum dolor sit amet,</p>
      </h1> 
   </li>
...
</ul>

我有一个 JS 函数，如果单击其兄弟跨度，则显示一个段落:

$('span[id^="span"]').click(function() {
    $('p[id^="p"]').hide( 900);
    $(this).next('p[id^="p"]').show(900);
});

它的问题是，即使目标段落已经显示(可见)，它也会触发动画。

我如何编写一个“if”语句，仅当其当前状态被隐藏时才显示目标段落，并且如果其已显示则不执行任何操作？

Answer 1

改变这个

$(this).next('p[id^="p"]').show(900);

至

$(this).next('p[id^="p"]:hidden').show(900);

使用hidden选择器仅选择那些隐藏的项目