單擊鏈接時，Jquery 顯示隱藏 div

Question

我試圖根據點擊的鏈接顯示隱藏 div 塊。 默認情況下，所有 div 都將隱藏。 感謝所有幫助。

HTML 代碼 -

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

要求 -

默認情況下，'itineraryPanel' div 隱藏。 如果“航班行程”用戶點擊下“itineraryMenu”鏈接DIV“itineraryPanel”將顯示（滑下）與“itineraryPanelItem”項股利。 其他 div '# fare-rules ' 和 '# Baggage-info ' 將隱藏。 單擊票價規則和行李信息時也會發生同樣的情況。

我嘗試 -

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

            });
        });
    }
});

我正在使用 bootstrap3。 請注意，在用戶未單擊任何鏈接之前，我不想顯示 'itineraryPanel' div。 在同一鏈接上第二次單擊后，打開 div 向上滑動並隱藏。

這是包含Vincent G代碼后的實時代碼 - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Answer 1

這是一種使用 jQuery 和data-href元素的方法

看到這個小提琴

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

編輯對於多個內容，您必須使用class而不是id

看到這個更新的小提琴

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