Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

java — Tạo menu thả xuống JQuery bằng div

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 12:11:20 25 4
mua khóa gpt4 Nike

Tôi đã vật lộn với vấn đề này một thời gian. Về cơ bản, tôi đang tạo một danh sách thả xuống có div chứa ul để tôi có thể có một hộp có chiều rộng cố định để tôi có thể đặt hình ảnh vào trong hộp.

Menu điều hướng của BestBuy.com là một ví dụ. Tôi thực sự thích thiết kế này nhưng tôi gặp khó khăn trong việc sao chép nó.

CSS của tôi chỉ hoạt động nếu li không phải là một liên kết. Ví dụ: nó ở trong

  • Liên kết
    • hợp lệ khi thay vì
  • Liên kết
    •  .

    Tất nhiên là ở bên trong

  • là một danh sách khác.

    Dù sao, tôi đã quyết định sử dụng JQuery để giải quyết vấn đề này và tôi đã đi được nửa đường rồi.

    Đây là JQuery của tôi:

    $(document).ready(function () {

        $(".navbar ul li").hover(function() {
            $(".navlink > div:first").addClass("active");
        }, chức năng() {
            $(".navlink > div:first").removeClass("active");
        });

        $(".secondarylink").hover(function() {
            $(".secondarylink > div").addClass("active");
        }, chức năng() {
            $(".secondarylink > div").removeClass("active");
        });

    });

    Đây là đánh dấu của tôi:

    Và cái nhìn của tôi:

    body {
        họ phông chữ:sans-serif;
        nền: #eee;
    }
    .navlink {
        display:block;
    }
    .navbar {
        nền:màu xanh nhạt;
        width: 100%;
        phần đệm: 0;
    }
    .navbar ul {
        kiểu danh sách: không có;
        phần đệm: 0;
        margin:0;
    }
    .navbar ul>li {
        hiển thị: khối nội tuyến;
    }
    .navbar ul li ul>li {
        display:block;
    }
    .secondlevel {
        vị trí: tuyệt đối;
        chiều rộng: 350px;
        chiều cao: 477px;
        nền:#fff;
        phần đệm: 0;
        đường viền: 1px liền khối #c3c4c4;
    }
    .thứ ba {
        vị trí: tuyệt đối;
        chiều rộng: 350px;
        chiều cao: 477px;
        nền:màu xanh nhạt;
        trái:350px;
        đường viền: 1px liền khối #c3c4c4;
        trên cùng:-1px;
    }
    .thirdlevel.two-cột {
        chiều rộng: 700px;
    }
    .thirdlevel div:con đầu lòng {
        vị trí: tuyệt đối;
        trái: 0;
    }
    .thứ ba div cấp {
        vị trí: tuyệt đối;
        đúng:0;
    }
    .cột {
        chiều rộng: 350px;
    }
    .thứ ba {
        display:none;
    }
    .secondlevel {
        display:none;
    }
    /*
    .navbar ul li:hover > div:con đầu lòng {
        display:block;
    }
    */
     .active {
        display:block;
    }
    .ẩn giấu {
        display:none;
    }
    .navbar ul li a {
        display:block;
    }

    Thử nghiệm

    Như bạn có thể thấy, trong CSS của tôi, tôi có .navbar ul li:hover > div:first-child { display:block;} .cái này hoạt động nhưng không có liên kết...Tôi được yêu cầu thử làm display:block;Nhưng điều đó cũng không có tác dụng.

    Những gì tôi cần làm (tôi nghĩ) là có thể chọn div:first-child để thực hiện công việc này, nhưng cho đến nay tôi vẫn chưa tìm thấy bất cứ điều gì hiệu quả. Tôi đã làm gì sai?

    Bất kỳ trợ giúp được đánh giá rất cao. Cảm ơn tất cả mọi người!

    câu trả lời hay nhất

    Tôi không hoàn toàn chắc chắn những gì bạn đang tìm kiếm, nhưng có lẽ điều này sẽ giúp ích.

    Sử dụng CSS:

    .navbar > ul > li:hover > .secondlevel {
        display: block;
    }
    .navbar .secondarylink:hover > .thirdlevel {
        display: block;
    }

    Thử nghiệm

    Sử dụng jQuery:

    $(".navbar ul li").hover(function () {
        $(this).find('.secondlevel').show();
    }, chức năng () {
        $(this).find('.secondlevel').hide();
    });

    $(".secondarylink").hover(function () {
        $(this).find('.thirdlevel').show();
    }, chức năng () {
        $(this).find('.thirdlevel').hide();
    });

    Thử nghiệm

    Về javascript - Sử dụng div để tạo menu thả xuống JQuery, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/29023595/

    25 4 0
    Bài viết khuyến nghị: Có một số ví dụ thực tế về việc sử dụng Object::*
    Bài viết khuyến nghị: Làm cách nào để giả mạo địa chỉ IP nguồn của tin nhắn nhật ký hệ thống?
    Bài viết khuyến nghị: linux - khối mã khoa học trên linux
    Bài viết khuyến nghị: Phân tích cú pháp html Qt không tìm thấy bất kỳ thẻ nào
    không gian vũ trụ
    Hồ sơ

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá taxi Didi miễn phí
    Phiếu giảm giá taxi Didi
    Các bài viết phổ biến trên toàn bộ trang web
    Chứng chỉ ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
    Xem sitemap của VNExpress