javascript - 加载并单击时隐藏/显示 div

Question

我想要做的是在加载时隐藏除 #p0 之外的所有段落。 另外，如果用户单击它的同级跨度，我想显示一个段落，并隐藏所有其他段落

<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>
...

Answer 1

$('p:not("#p0")').hide();

$('span').on('click',function() {
    $('p').hide();
    $(this).next('p').show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

如果您希望将其与页面上的其他 p/span 隔离，您可以使用 'prefixed-by' attribute selector (^=) ...

$('p[id^="p"]:not("#p0")').hide();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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