如何使用jQuery或CSS在特定元素之前获取下一个元素

I have a structure:

我有一个结构:

<div class="faq-section">

  <h4>1. Wie reserviere ich mir einen Platz, wenn ich einen Gutschein habe?</h4>
  <p>Es gibt für Gutscheinbesitzer 2 Wege um sich einen Platz am Himmel bei uns zu reservieren.</p>
  <ul>
    <li>Sie können sich telefonisch  Mo-Fr 09.00-17.00 Uhr unter <strong>056 667 27 08 </strong>oder</li>
    <li>Sie nutzen unser elektronisches Reservationsformular, welches  Sie <a title="Reservation" href="34-0-Reservation.html"> hier </a>finden.</li>
  </ul>

  <h4>2. Wie lange dauert eine Ballonfahrt?</h4>
  <p>Je nach Angebot das Sie wählen hat eine Ballonfahrt unterschiedliche Dauer in der Luft. Der Ablauf VOR- und NACH-&nbsp; der Ballonfahrt ist jedoch immer der Selbe.</p>
  <ol>
    <li>Fahrt vom Treffpunkt zum Startplatz (ca. 0,5 h)</li>
    <li>Aufbau des Ballons vor dem Start (ca. 0,5 h)</li>
    <li>Fahrt mit dem Heissluftballon (je nach Ihrer Wahl der Ballonfahrt )</li>
   <li>Verpacken des Ballons nach der Landung &nbsp;und Ballonfahrertaufe mit Champagner und persönlichem Zertifikat (ca. 0,5 h) </li>
   <li>kostenlose Rückfahrt vom Landeplatz zum Ausgangspunkt (ca. 0,5 h)</li>
 </ol>

</div>

What I want to do is make an accordion. So I added display : none to all the ol, ul and p in .faq-section So I want to know when clicking on h4 how to display all the elements that follow the clicked h4 before the next h4 so that all the elements before the next h4 is shown.

我想做的是制作手风琴。所以我在.faq-section中添加了display:none到所有的ol,ul和p所以我想知道点击h4时如何在下一个h4之前显示跟随点击的h4之后的所有元素,以便所有元素在之前显示下一个h4。

5 个解决方案

#1

Without changing your markup, you could use the nextUntil() function:

在不更改标记的情况下,您可以使用nextUntil()函数:

CSS:

.faq-section>*:not(h4) {
    display: none;
}

jQuery

$(function() {
    $('.faq-section h4').on('click', function() {
        $(this).nextUntil('h4').toggle();
    });
});

DEMO

#2

If you can change the html markup, you could wrap all the elements in a div like so:

如果你可以更改html标记,你可以将所有元素包装在div中,如下所示:

<h4>First</h4>
<div class='wrapper'>
 <p>Par</p>
 <ul>
   <li>list</li>
 </ul>
</div>
<h4>Second</h4>
.....

and toggle the visibility of .wrapper element.

并切换.wrapper元素的可见性。

jQuery

If you cannot edit the markup you can use jquery nextUntil() function:

如果您无法编辑标记,可以使用jquery nextUntil()函数:

$(document).on('click', 'h4', function() {
  $('ul, ol, p').removeClass('vis');
  $(this).nextUntil('h4').addClass('vis');
});

p,ul,ol { display:none }
p.vis,ul.vis,ol.vis { display:initial }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-section">

  <h4>1. Wie reserviere ich mir einen Platz, wenn ich einen Gutschein habe?</h4>
  <p>Es gibt für Gutscheinbesitzer 2 Wege um sich einen Platz am Himmel bei uns zu reservieren.</p>
  <ul>
    <li>Sie können sich telefonisch  Mo-Fr 09.00-17.00 Uhr unter <strong>056 667 27 08 </strong>oder</li>
    <li>Sie nutzen unser elektronisches Reservationsformular, welches  Sie <a title="Reservation" href="34-0-Reservation.html"> hier </a>finden.</li>
  </ul>

  <h4>2. Wie lange dauert eine Ballonfahrt?</h4>
  <p>Je nach Angebot das Sie wählen hat eine Ballonfahrt unterschiedliche Dauer in der Luft. Der Ablauf VOR- und NACH-&nbsp; der Ballonfahrt ist jedoch immer der Selbe.</p>
  <ol>
    <li>Fahrt vom Treffpunkt zum Startplatz (ca. 0,5 h)</li>
    <li>Aufbau des Ballons vor dem Start (ca. 0,5 h)</li>
    <li>Fahrt mit dem Heissluftballon (je nach Ihrer Wahl der Ballonfahrt )</li>
   <li>Verpacken des Ballons nach der Landung &nbsp;und Ballonfahrertaufe mit Champagner und persönlichem Zertifikat (ca. 0,5 h) </li>
   <li>kostenlose Rückfahrt vom Landeplatz zum Ausgangspunkt (ca. 0,5 h)</li>
 </ol>

</div>

#3

You can try this:

你可以试试这个:

<div class="faq-section">
  <div class="accordion">
      <h4 class="accordion-header" style="cursor:pointer;">1. Wie reserviere ich mir einen Platz, wenn ich einen Gutschein habe?</h4>
      <div class="collapsible" style="display:none">
          <p>Es gibt für Gutscheinbesitzer 2 Wege um sich einen Platz am Himmel bei uns zu reservieren.</p>
          <ul>
            <li>Sie können sich telefonisch  Mo-Fr 09.00-17.00 Uhr unter <strong>056 667 27 08 </strong>oder</li>
            <li>Sie nutzen unser elektronisches Reservationsformular, welches  Sie <a title="Reservation" href="34-0-Reservation.html"> hier </a>finden.</li>
          </ul>
      </div>
  </div>
  <div class="accordion">
        <h4 class="accordion-header" style="cursor:pointer;">2. Wie lange dauert eine Ballonfahrt?</h4>
        <div class="collapsible" style="display:none">
          <p>Je nach Angebot das Sie wählen hat eine Ballonfahrt unterschiedliche Dauer in der Luft. Der Ablauf VOR- und NACH-&nbsp; der Ballonfahrt ist jedoch immer der Selbe.</p>
          <ol>
            <li>Fahrt vom Treffpunkt zum Startplatz (ca. 0,5 h)</li>
            <li>Aufbau des Ballons vor dem Start (ca. 0,5 h)</li>
            <li>Fahrt mit dem Heissluftballon (je nach Ihrer Wahl der Ballonfahrt )</li>
           <li>Verpacken des Ballons nach der Landung &nbsp;und Ballonfahrertaufe mit Champagner und persönlichem Zertifikat (ca. 0,5 h) </li>
           <li>kostenlose Rückfahrt vom Landeplatz zum Ausgangspunkt (ca. 0,5 h)</li>
         </ol>
        </div>
  </div>
</div>

<script>
    $(document).ready(function(){
        $(".accordion-header").click(function(){
            $(this).next().toggle();
        });
    });
</script>

See here an example: https://jsfiddle.net/kyfus4Ld/

看这里的例子:https://jsfiddle.net/kyfus4Ld/

#4

you can use this

你可以用它

$(function(){ 
  $( "h4" ).on('click', function() {
    $(this).nextUntil( "h4" ).show();
  })
});

For reference please check this Reference

如需参考,请参阅此参考

Working demo Demo

工作演示演示

#5

$("h4").click(function(){    
    $("p").hide();
    $("ul").hide();

    $(this).next("p").show();
    $(this).next("ul").show();
})

#1