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

问题在于，即使目标段落已经显示（可见），它也会触发动画。

我如何写一个＆＃34;如果＆＃34;只有在隐藏当前状态时才显示目标段落的语句，如果已经显示，则不执行任何操作？

Answer 1

更改此

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

到

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

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

Answer 2

只需将点击功能更新为以下

即可

$('span[id^="span"]').click(function() {
    //check if already visible
    if(!$(this).next('p[id^="p"]').is(":visible")){
      $('p[id^="p"]').hide( 900);
      $(this).next('p[id^="p"]').show(900);
    }
});

如果div是可见的什么都不做，否则.show

2 个答案: