Jquery show link linkine tıklandığında linke tıklayın

Question

Tıklattığınız bağlantıya bağlı olarak div div bloklarını göstermeye çalışıyorum. Varsayılan olarak tüm div saklanacaktır. Tüm yardımlar takdir edilir.

HTML Kodu -

<div class="singleFlights"> 
    <div class="itinerarySummary"> 
    <div class="itineraryMenu"> 
     <ul class="list-inline"> 
      <li><a href="#flight-itinery">Flight itinerary</a></li> 
      <li><a href="#fare-rules">Fare rules</a></li> 
      <li><a href="#baggage-info">Baggage Information</a></li> 
     </ul> 
    </div> 
    <div class="itineraryPanel"> 
     <div id="flight-itinery" class="itineraryPanelItem"> 
      <!-- Content Here --> 
     </div> 
     <div id="fare-rules" class="itineraryPanelItem"> 
      <!-- Content Here --> 
     </div> 
     <div id="baggage-info" class="itineraryPanelItem"> 
      <!-- Content Here --> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="singleFlights"> 
..................... 
..................... 
</div> 

Gereksinimleri -

varsayılan 'itineraryPanel' div gizleme By. Eğer 'itineraryPanelItem' öğe div ile göstermek (aşağı kaydırın) olacak altındaki 'Uçuş güzergah' bağlantı 'itineraryMenu' div 'itineraryPanel' kullanıcı tıklayın. Diğerleri, ' fare-kuralları' ve '# bagaj-bilgi' etiketlerini '# ' gizleyecektir. Aynı durum Ücret kuralları ve Bagaj Bilgileri'a tıklandığında da olacaktır.

$(document).ready(function(){ 
    if($('.flightListing').length > 0){ 
     $('.singleFlights').each(function(){ 
      $('.itineraryMenu ul.list-inline li a').click(function(){ 

      }); 
     }); 
    } 
}); 

Ben bootstrap3 kullanıyorum -

Birlikte deneyin. Herhangi bir bağlantıyı tıklayana kadar 'itineraryPanel' div 'i göstermek istemediğimi unutmayın. ve aynı bağlantıda 2. kez tıkladıktan sonra div açılır ve gizlenir. İşte

canlı kod sonra Vincent G kodlarının dahildir - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Answer 1

İşte jQuery ile yapmanın yolu ve data-href elemanları

See this fiddle

$(function(){ 
    $(".list-inline a").click(function(){ 
     hrefId = $(this).data('href'); 
    $('.itineraryPanelItem').slideUp(); 
     if($(hrefId).is(':visible')){ 
     $(hrefId).slideUp(); 
    }else{ 
     $('.itineraryPanel').show(); 
     $(hrefId).slideDown(); 
    }  
    }); 
}); 

DÜZENLEME var Katları içeriğiyle, class yerine JavaScript kodu nereye id

See this updated fiddle

$(function(){ 
    $(".list-inline a").click(function(){ 
     hrefClass = $(this).data('href'); 
    $(this).parents('.singleFlights').find('.itineraryPanelItem').slideUp(); 
     if($(this).parents('.singleFlights').find($(hrefClass)).is(':visible')){ 
     $(this).parents('.singleFlights').find(hrefClass).slideUp(); 
    }else{ 
     $(this).parents('.singleFlights').find('.itineraryPanel').show(); 
     $(this).parents('.singleFlights').find(hrefClass).slideDown(); 
    }  
    }); 
});