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>

要求 -

默认＆＃39; itineraryPanel＆＃39; div hide。如果用户点击航班行程＆＃39;链接在＆＃39; 行程菜单＆＃39; div＆＃39; itineraryPanel ＆＃39;将显示（向下滑动）＆＃39; itineraryPanelItem ＆＃39;项目div。其他div＆＃39;＃票价规则＆＃39;和＆＃39;＃行李信息＆＃39;会隐藏。点击票价规则和行李信息也会发生同样的情况。

我尝试用 -

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

            });
        });
    }
});

我正在使用bootstrap3。请注意，我不想展示＆＃39; itineraryPanel＆＃39; div直到用户没有点击任何链接。然后在同一个链接上点击第二次后打开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显示隐藏div

1 个答案: