WedX - журнал о программировании и компьютерных науках

Как скрыть следующий div при нажатии кнопки в jquery?

У меня есть дизайн страницы поиска рейсов в HTML. Теперь нужно показать/скрыть (slidUp/slideDown) следующий div при нажатии кнопки.

Вот моя html-разметка:

https://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>

Я хочу скользить вверх и вниз (переключать) div «flight-itinerarySummary» по «btn-more» при нажатии. Кроме того, если какой-либо «flight-itinerarySummary» имеет значение slideDown, все остальные строки «flight-itinerarySummary» будут скользить вверх (скрываться). Я включил Jquery v2.1.1 в раздел html. Пожалуйста, помогите мне построить это на jquery.

javascript jquery jquery-ui
06.11.2015

  • лучше включить соответствующий код в сам вопрос, а не заставлять ТАК людей переходить на другую страницу для проверки. 06.11.2015
  • хорошо. спасибо, я отредактировал свой вопрос 06.11.2015

Ответы:


1

Попробуй это:

$(this).next() получает следующий элемент.

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

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

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

    return false;
});
06.11.2015

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

Если вы хотите, вы можете скрыть все div с классом Flight-itinerarySummary в начале, добавив следующий стиль.

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

JSFiddle

06.11.2015

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();
  });
 })
06.11.2015
  • Другие 'flight-itinerarySummary' не скрываются, если открыты. 06.11.2015
    • Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]