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

javascript - ul li a ảnh hưởng đến ul li ul li a

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-03 19:52:58 28 4
mua khóa gpt4 Nike

Nếu tiêu đề khó hiểu thì mình giải thích nhé...

Tôi có menu chuyển đổi css/jquery. Khi bạn nhấn dấu "+" thì nó sẽ lớn hơn và khi bạn nhấn dấu "-" thì nó sẽ nhỏ hơn. Tôi đang làm cho phần đệm, lề và chiều cao của một số thành phần thay đổi khi chuyển đổi/nhấp chuột. Phần trên cùng của menu chứa đầy các liên kết và sau đó khi bạn di chuột qua một liên kết, nó sẽ hiển thị nhiều liên kết phụ hơn. Liên kết chính ở trên cùng sử dụng mã css:

/*Phong cách các mục liên kết menu cấp cao nhất*/
.jquerycssmenu ul li a{
    display: block;
    nền: không có; /*nền của các tab (trạng thái mặc định)*/
    phần đệm: 5px 18px 32px 18px;
    lề phải: 3px; /*khoảng cách giữa các tab*/
    màu sắc:#fff;
    trang trí văn bản: không có;
}

Menu con sử dụng mã css này:

/* Kiểu liên kết menu cấp phụ */
.jquerycssmenu ul li ul li a{
    phông chữ: Verdana 13px bình thường;
    chiều rộng: 320px; /*chiều rộng của menu phụ*/
    chiều cao:60px;
    nền: đen;
    color: white;
    margin: 0;
    chiều rộng đường viền trên cùng: 0;
    viền dưới: 1px liền khối #2c2c2c;
    phần đệm:20px 0px 0 20px;
}

Tôi đã thiết lập JQuery để menu con xuất hiện bằng cách bật/tắt thu nhỏ... Đây là những gì tôi làm:

$(document).ready(function(){   
  $('.gh-gallink').toggle(
    chức năng() {
    $('.jquerycssmenu ul li ul li a').animate({
      chiều cao: "40px",
      phần đệm: "10px 0px 0 20px"
    }, 100);
    $(this).text('+');
  },

  chức năng() {
    $('.jquerycssmenu ul li ul li a').animate({
      chiều cao: "60px",
      phần đệm: "20px 0px 0 20px"
    }, 100);
    $(this).text('-');

  });
});

Điều này hoạt động rất tốt! Sau đó, tôi đã cố gắng vào menu chính (.jquerycssmenu ul li a) trong JQuery và tôi đã làm điều này:

$(document).ready(function(){   
  $('.gh-gallink').toggle(
    chức năng() {
    $('.jquerycssmenu ul li ul li a').animate({
      chiều cao: "40px",
      phần đệm: "10px 0px 0 20px"
    }, 100);
    $('.jquerycssmenu ul li a').animate({
      phần đệmBottom: "8px"
    }, 100);
    $(this).text('+');
  },

  chức năng() {
    $('.jquerycssmenu ul li ul li a').animate({
      chiều cao: "60px",
      phần đệm: "20px 0px 0 20px"
    }, 100);
    $('.jquerycssmenu ul li a').animate({
      phần đệmBottom: "32px"
    }, 100);
    $(this).text('-');

  });
});

vì lý do nào đó,ul li a(Menu chính) sẽ ảnh hưởng ul li ul li a(menu phụ). Sau khi chuyển đổi menu, menu con phần đệm dưới cùng Tương tự như menu chính32px lớn hơn 8px khi nhỏ hơn..khi phần đệm dưới cùng Khi nó lớn hơn thì phải 0px, khi nhỏ hơn thì nó phải là 0px, như được hiển thị ở trên.

Tại sao ul li a(Liên kết menu chính) ul li ul li a(liên kết menu phụ)? Làm cách nào tôi có thể khắc phục sự cố CSS/JQuery này để các liên kết menu chính không ảnh hưởng đến các liên kết menu phụ.

Mô tả ngắn gọn:Tôi có thể chỉnh sửa thành công ul li a mã mà không ảnh hưởng đến CSS ul li ul li a mã số. Ngay khi tôi áp dụng mã vào JQuery, mọi thứ trở nên lộn xộn.

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

Bạn nên sử dụng cái này:

`.jquerycssmenu > ul > li > a`

Thay vì điều này:

`.jquerycssmenu ul li a`

nó đây rồi Giải thích về bộ chọn CSS:
Bộ chọn CSS ">" (dấu lớn hơn) có nghĩa là gì?

Về javascript - ul li a ảnh hưởng đến ul li ul li a, 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/13675331/

28 4 0
Bài viết khuyến nghị: c# - ExcelDNA : Không đồng bộ: Chuỗi cuộc gọi phải là STA
Bài viết khuyến nghị: matlab - Làm thế nào để chọn n phần tử của dãy trong cửa sổ m? (matlab)
Bài viết khuyến nghị: matlab - Làm cách nào để khai báo hàm có tham số là mảng?
Bài viết khuyến nghị: jQuery - Chuyển đổi mở rộng/đóng hình nền CSS
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