如何在jquery中显示隐藏按钮单击的下一个div？答案

【问题标题】：How to show hide the next div on button click in jquery?如何在jquery中显示隐藏按钮单击的下一个div？
【发布时间】：2016-02-07 06:20:03
【问题描述】：

我设计了一个 HTML 格式的航班搜索列表页面。现在想在按钮点击时显示/隐藏（slidUp/slideDown）下一个 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>

我想在点击时在“btn-more”上滑动和滑动（切换）“flight-itinerarySummary”div。此外，如果任何一个 'flight-itinerarySummary' 为 slideDown，所有其他行 'flight-itinerarySummary' 将向上滑动（隐藏）。我在 html 部分包含了 Jquery v2.1.1。请帮助我任何人在 jquery 上构建它。

【问题讨论】：

最好将相关代码包含在问题本身中，而不是让人们去另一个页面检查。
好的。谢谢我已经编辑了我的问题

标签： javascript jquery jquery-ui

【解决方案1】：

试试这个：

$(this).next() 获取下一个元素。

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

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

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

    return false;
});

【讨论】：

【解决方案2】：

您可以检查元素是否可见，然后向下滑动或向上滑动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();
        }
    });
});

如果需要，您可以通过添加以下样式来隐藏所有具有类 flight-itinerarySummary 的 div。

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

JSFiddle

【讨论】：

【解决方案3】：

你可以这样做

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

更新：

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

【讨论】：

其他 'flight-itinerarySummary' 如果打开则不会隐藏。