如何獲得使用jQuery或CSS

Question

特定元素之前下一個元素我有一個結構：

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

我想要做的就是讓手風琴。 所以我加display : none所有ol, ul and p在.faq-section 所以我想知道什麼時候點擊h4如何顯示在下一個h4之前點擊h4之後的所有元素，以便顯示下一個h4之前的所有元素。

Answer 1

不改變你的標記，你可以使用nextUntil()功能：

CSS：

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

jQuery的

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

DEMO

Answer 2

如果你可以改變HTML標記，你可以包裝在一個div的所有元素，像這樣：

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

和切換.wrapper元素的可見性。

jQuery的

如果您不能編輯標記，你可以使用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>

Answer 3

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

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

Answer 4

您可以使用此

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

僅供參考，請檢查該Reference

工作演示Demo

Answer 5

你可以試試這個：

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

在這裏看到一個例子： https://jsfiddle.net/kyfus4Ld/