如何顯示隱藏按鈕點擊jquery下一個div？

我設計了一個HTML中的航班搜索列表頁面。現在想要顯示/隱藏（slidingUp/slideDown）按鈕單擊下一個div。如何顯示隱藏按鈕點擊jquery下一個div？

這裏我的HTML標記：

http://qubedns.co.in/codes/design/rnp/flight-listing-1.html

HTML代碼：

<td class="flight-list"> 

    <!-- FLIGHT 1 ---> 
    <div class="flights"> 
     <div class="flight-box"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="flight-info"> 
         <div class="left-i"> 
          <img src="img/sp_trans.gif" class="airsprite airlogo A10"> 
          <div class="flight-no">SG-264</div> 
         </div> 
         <div class="right-i"> 
          <div class="name">Air India</div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-5"> 
        <div class="flight-duration"> 
         <div class="row"> 
          <div class="col-sm-4"> 
           <div class="events"> 
            <span class="text">Depart</span> 
            <span class="time">12:30 PM</span> 
            <span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span> 
           </div> 
          </div> 
          <div class="col-sm-4"> 
           <div class="events"> 
            <span class="text">Arrive</span> 
            <span class="time">03:10 PM</span> 
            <span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span> 
           </div> 
          </div> 
          <div class="col-sm-4"> 
           <div class="events"> 
            <span class="text">Duration</span> 
            <span class="time">1h 40m </span> 
            <span class="route">No Stop</span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <div class="fare-price"> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <span class="f-price">3999</span> 
          </div> 
          <div class="col-sm-6"> 
           <div class="book-action"> 
            <div class="btn-group-vertical" role="group"> 
             <button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button> 
             <button type="button" class="btn text-primary btn-more" name="details">View More...</button> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 
     <div class="flight-footer"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="refund-status"> 
         <span>Refundable</span> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="fare-role"> 
         <a href="#">Fare rules</a> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="baggage-info"> 
         <a href="#">Baggage Information</a> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="itinerary-info"> 
         <a href="#">Flight itinerary</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="flight-itinerarySummary"> 
     <div class="row"> 
      <div class="col-sm-12"> 
      <h2>Agartala → Bangalore <small>22 Nov 2015</small></h2> 
      <ul class="itinerarySummary"> 
       <li class="vendor"> 
        <div class="airLogo fLeft"> 
         <img src="img/airlines/AI.png" height="23" width="27"> 
        </div> 
        <div class="airlineName"> 
        <span class="name">Air India</span> 
        <small class="flightNumber">AI-744</small> 
        <small class="travelClass">Economy</small> 
        <small class="truncate" title=""></small> 
        </div> 
       </li> 
       <li class="start"> 
        <time> 
        <span class="placeTime"> 
         <span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span> 
         <strong> 11:20 </strong> 
        </span> 
        <span class="travelDate">22 Nov 2015</span> 
        </time> 
        <small class="terminal"> 

         Singerbhil, Agartala 
        </small> 
       </li> 
       <li class="details"> 
        <i class="clk itineraryClock"></i> 
         <abbr class="duration weak">50m</abbr> 
       </li> 
       <li class="end"> 
        <time> 
        <span class="placeTime"> 
        <strong> 12:10 </strong> 
        <span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span> 
        </span> 
        <span class="travelDate"> 22 Nov 2015 </span> 
        </time> 
        <small class="terminal"> 
         Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2 
        </small> 
       </li> 
      </ul> 
      <div class="connector weak"> 
       <small class="layOver">Layover : 5h 20m</small> 
      </div> 
      <ul class="itinerarySummary"> 
       <li class="vendor"> 
        <div class="airLogo fLeft"> 
         <img src="img/airlines/AI.png" height="23" width="27"> 
        </div> 
        <div class="airlineName"> 
        <span class="name">Air India</span> 
        <small class="flightNumber">AI-744</small> 
        <small class="travelClass">Economy</small> 
        <small class="truncate" title=""></small> 
        </div> 
       </li> 
       <li class="start"> 
        <time> 
        <span class="placeTime"> 
         <span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span> 
         <strong> 11:20 </strong> 
        </span> 
        <span class="travelDate">22 Nov 2015</span> 
        </time> 
        <small class="terminal"> 

         Singerbhil, Agartala 
        </small> 
       </li> 
       <li class="details"> 
        <i class="clk itineraryClock"></i> 
         <abbr class="duration weak">50m</abbr> 
       </li> 
       <li class="end"> 
        <time> 
        <span class="placeTime"> 
        <strong> 12:10 </strong> 
        <span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span> 
        </span> 
        <span class="travelDate"> 22 Nov 2015 </span> 
        </time> 
        <small class="terminal"> 
         Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2 
        </small> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- FLIGHT 1 END --> 

    <!-- FLIGHT 2 --> 
    <div class="flights"> 
     <div class="flight-box"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="flight-info"> 
         <div class="left-i"> 
          <img src="img/sp_trans.gif" class="airsprite airlogo A10"> 
          <div class="flight-no">SG-264</div> 
         </div> 
         <div class="right-i"> 
          <div class="name">Air India</div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-5"> 
        <div class="flight-duration"> 
         <div class="row"> 
          <div class="col-sm-4"> 
           <div class="events"> 
            <span class="text">Depart</span> 
            <span class="time">12:30 PM</span> 
            <span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span> 
           </div> 
          </div> 
          <div class="col-sm-4"> 
           <div class="events"> 
            <span class="text">Arrive</span> 
            <span class="time">03:10 PM</span> 
            <span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span> 
           </div> 
          </div> 
          <div class="col-sm-4"> 
           <div class="events"> 
            <span class="text">Duration</span> 
            <span class="time">1h 40m </span> 
            <span class="route">No Stop</span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <div class="fare-price"> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <span class="f-price">3999</span> 
          </div> 
          <div class="col-sm-6"> 
           <div class="book-action"> 
            <div class="btn-group-vertical" role="group"> 
             <button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button> 
             <button type="button" class="btn text-primary btn-more" name="details">View More...</button> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 
     <div class="flight-footer"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="refund-status"> 
         <span>Refundable</span> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="fare-role"> 
         <a href="#">Fare rules</a> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="baggage-info"> 
         <a href="#">Baggage Information</a> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="itinerary-info"> 
         <a href="#">Flight itinerary</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="flight-itinerarySummary"> 
     <div class="row"> 
      <div class="col-sm-12"> 
      <h2>Agartala → Bangalore <small>22 Nov 2015</small></h2> 
      <ul class="itinerarySummary"> 
       <li class="vendor"> 
        <div class="airLogo fLeft"> 
         <img src="img/airlines/AI.png" height="23" width="27"> 
        </div> 
        <div class="airlineName"> 
        <span class="name">Air India</span> 
        <small class="flightNumber">AI-744</small> 
        <small class="travelClass">Economy</small> 
        <small class="truncate" title=""></small> 
        </div> 
       </li> 
       <li class="start"> 
        <time> 
        <span class="placeTime"> 
         <span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span> 
         <strong> 11:20 </strong> 
        </span> 
        <span class="travelDate">22 Nov 2015</span> 
        </time> 
        <small class="terminal"> 

         Singerbhil, Agartala 
        </small> 
       </li> 
       <li class="details"> 
        <i class="clk itineraryClock"></i> 
         <abbr class="duration weak">50m</abbr> 
       </li> 
       <li class="end"> 
        <time> 
        <span class="placeTime"> 
        <strong> 12:10 </strong> 
        <span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span> 
        </span> 
        <span class="travelDate"> 22 Nov 2015 </span> 
        </time> 
        <small class="terminal"> 
         Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2 
        </small> 
       </li> 
      </ul> 
      <div class="connector weak"> 
       <small class="layOver">Layover : 5h 20m</small> 
      </div> 
      <ul class="itinerarySummary"> 
       <li class="vendor"> 
        <div class="airLogo fLeft"> 
         <img src="img/airlines/AI.png" height="23" width="27"> 
        </div> 
        <div class="airlineName"> 
        <span class="name">Air India</span> 
        <small class="flightNumber">AI-744</small> 
        <small class="travelClass">Economy</small> 
        <small class="truncate" title=""></small> 
        </div> 
       </li> 
       <li class="start"> 
        <time> 
        <span class="placeTime"> 
         <span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span> 
         <strong> 11:20 </strong> 
        </span> 
        <span class="travelDate">22 Nov 2015</span> 
        </time> 
        <small class="terminal"> 

         Singerbhil, Agartala 
        </small> 
       </li> 
       <li class="details"> 
        <i class="clk itineraryClock"></i> 
         <abbr class="duration weak">50m</abbr> 
       </li> 
       <li class="end"> 
        <time> 
        <span class="placeTime"> 
        <strong> 12:10 </strong> 
        <span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span> 
        </span> 
        <span class="travelDate"> 22 Nov 2015 </span> 
        </time> 
        <small class="terminal"> 
         Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2 
        </small> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- FLIGHT 2 END --> 

</td>

我要上效果基本show上 'BTN-更多' &了slideDown（切換） '飛行itinerarySummary' DIV單擊。另外，如果任何一個'flight-itinerarySummary'爲slideDown，則所有其他行'flight-itinerarySummary'將slideUp（隱藏）。我已經在html部分包含Jquery v2.1.1。 Plz幫助我的任何人在jquery上構建這個。

來源

2015-11-06 Jargo Viet

其更好地包括在問題本身相關的代碼，而不是這樣的人去到另一個頁面，檢查。 – guradio

okey。謝謝我編輯我的問題 –

爲此，您可以像下面

$('.btn-more').click(function() { 
    $(this).closest('.flight-box') 
    .siblings('.flight-itinerarySummary') 
    .slideToggle(); 
})

UPDATE：

$('.btn-more').click(function() { 
    var nextItiner = $(this).closest('.flight-box').siblings('.flight-itinerarySummary'); 

    if(nextItiner.is(':visible')){ 
     nextItiner.slideUp(); 
    } 
    else { 
     nextItiner.slideDown(); 
    } 

    $('.flight-itinerarySummary').not(nextItiner[0]).each(function(){ 
     $(this).hide(); 
    }); 
})

來源

2015-11-06 07:13:20 Azim

其他'flight-itinerarySummary'如果打開，不會隱藏。 –

哦。我編輯了我的答案。希望它現在好了。 – Azim

試試這個：

$（本）。接下來（）獲取下一個元素。

$('.btn text-primary btn-more').click(function() { 

    $('div.flightitinerarySummary').slideUp(); 

    $(this).next('div.flight-itinerarySummary').slideToggle(); 

    return false; 
});

來源

2015-11-06 07:25:50 Nikki

您可以檢查元素是否可見，然後向下滑動或向上滑動div，如下所示。

$(document).ready(function(e) { 
    $(".btn-more").click(function(){ 
     $('.flight-itinerarySummary').slideUp(); 
     if($(this).closest('.flight-box').siblings('.flight-itinerarySummary').is(":visible")){ 
     $(this).closest('.flight-box') 
    .siblings('.flight-itinerarySummary') 
    .slideUp(); 
     }else{ 
     $(this).closest('.flight-box') 
    .siblings('.flight-itinerarySummary') 
    .slideDown(); 
     } 
    }); 
});

如果你願意，你可以隱藏所有div類的flight-itinerarySummary，首先添加下面的樣式。

<style> 
.flight-itinerarySummary{ 
    display:none; 
} 
</style>

JSFiddle

來源

2015-11-06 07:31:24

如何顯示隱藏按鈕點擊jquery下一個div？

回答

相關問題