今天想修改一下頁面的風格和佈局。

修改了各個頁面頭部導航欄的風格；

修改了主頁面快捷查詢、預訂和使用者中心的風格。

原本：點選之後在下面區域展示相應內容

 新的想法：做成河北航空類似的效果，橫向展開收起的手風琴模組。

 走了一些彎路。

 目前已經完成了。

效果展示：

 實現核心思想：把每一個功能的功能概述和具體功能放到同一個li下，給它們設定flex佈局，修改其佈局，只讓功能概述展示出來。然後當用戶點選的時候通過使用JQuery的animate來修改其屬性值實現展示具體功能的目的。

具體實現程式碼如下：

html：

        <!-- 頭部 -->
        <
 
div class="div_head flex" id="div_head">
            <!-- <nav class="navbar navbar-transparent" role="navigation" > -->
                <!-- <div class="container-fluid"> -->
                    <div class="flex1" style="height: 80px;">
                        <!--
 
 這裡插入圖片，做頁面跳轉 -->
                        <a class="a" id="a_1" href="./index.html">回到首頁</a>
                    </div>
                    <div class="flex1"  style="height: 80px;">
                        <a class="a"  href="#">我的會員</a>
                    </div
 
>
                    
                    <div class="flex1 flex">
                        <div class="menuarea">
                            <div><a class="a" href="">預定服務</a></div>
                                <div class="menuarea_bottom flex" style="border:1px solid;width:1000px !important;height: 200px;padding-top: 40px;">
                                    <div class="menuarea_bottom flex1 flex column">
                                        <div style="height: 80px;">
                                            <a class="a" href="./book.html">機票預訂</a>
                                        </div>
                                        <div class="flex1">
                                            線上預訂機票更方便
                                        </div>
                                    </div>
                                    <div class="menuarea_bottom flex1 flex column">
                                        <div style="height: 80px;">
                                            <a class="a" href="./change.html">機票改退</a>
                                        </div>
                                        <div class="flex1">
                                            線上完成航班改期，自動退票
                                        </div>
                                    </div>
                                    <div class="menuarea_bottom flex1 flex column">
                                        <div style="height: 80px;">
                                            <a class="a" href="./query.html">航班查詢</a>
                                        </div>
                                        <div class="flex1">
                                            線上完成航班改期，自動退票
                                        </div>
                                    </div>
                                    <div class="menuarea_bottom flex1 flex column">
                                        <div style="height: 80px;">
                                            <a class="a" href="">非自願改期</a>
                                        </div>
                                        <div class="flex1">
                                            線上完成航班改期，自動退票
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="flex1"  style="height: 80px;">
                        <a class="a" href="#">旅行貼士</a>
                    </div>

                    <!-- 這裡填寫程式碼，判斷使用者是否已經登入，已經登入的話就使用使用者的資訊 -->
                    <div id="user_part"  class="flex">
                            <a href="./login.html" id="a_3" style="margin-left:80%">登入</a>
                    </div>
                <!-- </div> -->
                
            <!-- </nav> -->


        </div>

css：

    .active_head{
        margin-left: 0;
    }
    #acc {
      width: 1400px;
      height: 300px;
      margin: 0 auto;
    }
    #acc ul {
      /* border-left: 1px solid #ddd; */
      margin-left: 13%;
      height: 300px;
      position: relative;
    }

    #acc ul li {
      width: 60px;
      height: 300px;
      border: 1px solid #ddd;
      float: left;
      list-style: none;
      border-left: 1px solid #ddd;
      margin-right: 8px;
      position: relative;
      overflow: hidden;
    }
    #div_1 {
        width: 450px;
        overflow:none;
      }

    #acc ul li h3 {
      font-size: 20px;
      color: #000;
      font-weight: 100;
      width: 60px;
      height: 300px;
      border-right: 1px solid #ddd;
      padding-left: 20px;
      padding-top: 20px;
      padding-right: 40px;
    }
    #acc ul li div {
    font-size: 18px;
      width: 800px;
      height: 300px;
      /* border-left: 1px solid ; */
      /* background-color: lightgray; */
      position: relative;
      top: 0;
      /* border: 1px solid blue; */
    }
    #acc ul li.last {
      /* position: absolute; */
      position: relative;
      top: 0;
      right: 0;
    }

js：

    $("#acc")
    .find("li")
    .click(function () {
      $(this)
        .stop()
        .animate({ width: "800px" }, 800)
        .children("div")
        .addClass("active")
        //end()是從h3回到li上去
        .end()
        .siblings() //當前li的所有兄弟li
        .stop()
        .animate({ width: "50px" }, 800)
        .children("div")
        .removeClass("active");
    });

參考連結：

(87條訊息) jquery實現手風琴效果_coder_wb的部落格-CSDN部落格_jquery手風琴效果