jQuery：案例 - 手風琴特效 & 購物車結算

阿新 • • 發佈：2021-08-30

1 手風琴特效

<style>
    dd{
        display: none; /*隱藏元素*/
    }
</style>
<body>
    <nav>
        <header>拉勾網</header>
        <ul>
            <li>
                <dl>
                    <dt>求職</dt>
                    <dd>1.簡歷</ 
dd>
                    <dd>2.面試</dd>
                    <dd>3.入職</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>教育</dt>
                    <dd>1.看視訊</dd>
                    < 
dd>2.做作業</dd>
                    <dd>3.24小時線上輔導</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>3W創業</dt>
                    <dd>1.幫助小企業</dd>
                    <dd>2.頭腦風暴</ 
dd>
                    <dd>3.賺錢啦</dd>
                </dl>
            </li>
        </ul>
    </nav>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("nav dt").click(function(){
        //所有的dd全部都閉合上，除了自己的兄弟
        $("dd").not( $(this).siblings() ).slideUp(500);
        // 自己的兄弟進行切換，顯示閉合上，閉合的顯示出來
        $(this).siblings().slideToggle(500);
    });
    </script>
</body>

2 購物車結算

<style>
    .jian,.jia{
        border:1px solid #999;
        display: inline-block; /*超連結a是行內元素，只能轉換成行內塊元素，才能改變寬和高*/
        width: 20px;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>
    <table border="1" cellspacing="0" width="400">
        <tr>
            <td>商品編號</td>
            <td>名稱</td>
            <td>單價</td>
            <td>數量</td>
            <td>總價</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香腸</td>
            <td>3</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龍</td>
            <td>1000</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>1000</td>
        </tr>
    </table>
    <p style="width: 400px; text-align: right;">
        總價：<b style="color:red;">111</b> <button>提交訂單   </button>
    </p>
</body>

jQuery：案例 - 手風琴特效 & 購物車結算

1 手風琴特效 <style> dd{ display: none; /*隱藏元素*/ } </style> <body> <nav>

JQuery 黑馬案例手風琴 ! Important（名片摺疊案例）

技術標籤：jquery自學html+css黑馬案例htmljquerycss3 <!DOCTYPE html> <html lang="en">

jQuery實現手風琴特效

本文例項為大家分享了jQuery實現手風琴的具體程式碼，供大家參考，具體內容如下

JavaWeb19.5【Filter&Listener：案例1-登入驗證】

基於day17_base專案 1 package com.haifei.web.filter; 2 3 import javax.servlet.*; 4 import javax.servlet.annotation.WebFilter;

資料庫：商城案例 - 編寫UserDao & 測試註冊與登入功能

UserDao 　　需求一: 編寫一個註冊使用者的方法,接收的引數是一個User物件　　需求二: 編寫一個使用者登入的方法,接收的引數是使用者名稱和密碼, 返回值是User物件

Bootstrap：案例 - 首頁輪播大圖 & 響應式導航條

1首頁輪播大圖 1. 大小螢幕自動適應,擴大縮小瀏覽器 2. 滾動數字區點選左右切換圖片

Mysql 插入中文錯誤：Incorrect string value: &#039;\xE7\xA8\x8B\xE5\xBA\x8F...&#039; for column &#039;

1. 確定資料庫編碼 Incorrect string value: \'\\xE7\\xA8\\x8B\\xE5\\xBA\\x8F...\' for column \'course\' at row 1

jquery實現垂直手風琴導航欄

本文例項為大家分享了jquery實現垂直手風琴導航欄的具體程式碼，供大家參考，具體內容如下

資料庫中出現錯誤：1054 - Unknown column &#039;bus_car.car_id&#039; in &#039;on clause&#039;

原sql為： SELECT bus_car.car_id,bus_car.car_name,bus_customer.customer_id,bus_customer.cust_name,bus_rent.rent_id,bus_rent.begin_date,bus_rent.end_date,bus_rent.price,bus_rent.rent_flag,bus_rent.o