javascript - 純粋な JavaScript ドロップダウン DIV アニメーション

Question

これをグーグルで検索するのにうんざりしているので、ここで専門家に尋ねることにしました。ここのようなドロップダウン DIV の効果を作成する方法は可能ですか? http://137pillarshouse.com/accommodation - jQuery やライブラリを使用しない純粋な JavaScript を使用した BOOK NOW ブロック。

ありがとう

Answer 1

彼らは JavaScript コードを難読化しませんでした。彼らのコードから学ぶことができます。

1. http://137pillarshouse.com/js/script.js

// 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'});

2.

    <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>

3.そして少しのCSS

モバイル

@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;
}

残りはあなた次第です...少しスタイルを整えれば、きっとそこに着くでしょう:)