纯javascript下拉DIV动画

我厌倦了在谷歌上搜索这个，所以我决定在这里咨询专业人士。有没有可能，以及如何创建像这里这样的下拉DIV效果-现在这本书使用纯javascript阻止了jQuery或任何库

---

感谢他们没有混淆javascript代码，您可以从他们的代码中学习

1. 桌面

---

剩下的就看你了。。。我敢肯定，只要稍微设计一下，您就会达到目的：）

因为jQuery是用Javascript编写的，所以您可以选择在不使用jQuery的情况下使用jQuery执行其他操作，尽管编写jQuery可能需要相当长的时间。问题很简单，您将在没有库的便利的情况下使用JavaScript编程。希望这有帮助。

// show/hide booking form
        $('#bookingpanel #booknow').click(function(){
            $('#quickbookingform').slideToggle(750,'easeOutQuart');
            $('#bookingpanel').toggleClass('open');
            $(this).html($(this).html() == 'Book <em>Now</em>' ? 'Close' : 'Book <em>Now</em>');
            return false;
        });
// Quick Booking Form
    $('#StartDateString').datepicker({dateFormat:'dd/mm/yy',firstDay:1,minDate:1,maxDate:'+18m'});

    <div id="bookingpanel" class="">
 <form action="https://www.luxuryroomreservations.com/en-GB/IBE/115/Landing/Index" method="post" id="quickbookingform" class="booking" style="display: none; ">
    <fieldset>
    <label for="StartDateString">Arrival Date</label>
    <input class="text hasDatepicker" id="StartDateString" name="CurrentBooking.CurrentUserSearch.StartDateString" type="text" value="">
     <label for="NoOfNights">Nights</label>
     <select id="CurrentBooking_CurrentUserSearch_NoOfNights" name="CurrentBooking.CurrentUserSearch.NoOfNights">
        <option selected="selected" value="1">1</option>
        .....
    </select>
    <div class="left">
    <label for="NoOfAdults">Adults</label>
    <select id="NoOfAdults" name="CurrentBooking.CurrentUserSearch.NoOfAdults">
        <option value="1">1</option>
        <option selected="selected" value="2">2</option>
        <option value="3">3</option>
    </select>
    </div><!-- /.left -->
    <div class="right">
    <label for="NoOfChildren">Children</label>
    <select id="NoOfChildren" name="CurrentBooking.CurrentUserSearch.NoOfChildren">
            <option selected="selected" value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div><!-- /.right -->
    <input id="CurrentBooking_CurrentUserSearch_AccountId" name="CurrentBooking.CurrentUserSearch.AccountId" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_SpecialRateCode" name="CurrentBooking.CurrentUserSearch.SpecialRateCode" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_IataCode" name="CurrentBooking.CurrentUserSearch.IataCode" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_HotelCode" name="CurrentBooking.CurrentUserSearch.HotelCode" type="hidden" value="HUCNXPH">
    <p><input type="submit" value="Check Availability" id="booking_submit"></p>
</fieldset>
</form><a href="#bookingpanel" id="booknow">Book <em>Now</em></a>
</div>

@media only screen and (min-width: 768px)
#bookingpanel {
top: -10px;
right: 60px;
}

#bookingpanel {
position: absolute;
top: -10px;
right: 20px;
z-index: 100;
width: 15em;
-moz-transition-duration: .25s;
-webkit-transition-duration: .25s;
-o-transition-duration: .25s;
-ms-transition-duration: .25s;
transition-duration: .25s;
}