Jquery 单击 link 时显示隐藏 div

Question

我试图根据点击的 link 显示隐藏 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”下的“Flight itinerary”link，div“itineraryPanel ' 将显示（向下滑动）'itineraryPanelItem' 项目 div。其他div'#fare-rules'和'#baggage-info'会隐藏。单击 票价规则 和 行李信息 时也会发生同样的情况。

我试试 -

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

            });
        });
    }
});

我正在使用 bootstrap3。请注意，在用户未单击任何 link 之前，我不想显示 'itineraryPanel' div。在同一个 link 上单击第二次后打开 div 向上滑动并隐藏。

这是包含 Vincent G 代码后的实时代码 - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Answer 1

这是一种使用 jQuery 和 data-href 元素的方法

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

编辑对于多个内容，您必须使用 class 而不是 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();
    }    
  });
});

Jquery 单击 link 时显示隐藏 div

Jquery show hide div when click on link

javascript

css

jquery

show-hide