如何显示隐藏按钮点击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？

回答

相关问题