Ngăn chặn hiển thị của jquery/ẩn khỏi việc thêm kiểu nội tuyến?

Question

Tôi có một trường hợp mà tôi cần phải chuyển đổi khả năng hiển thị của một phần tử dựa trên việc một hoạt động cụ thể (phân loại) có đang diễn ra không, nếu có, nó bị ẩn, nếu không nó sẽ hiển thị.

Bây giờ tôi có css mà trông như thế này:

.isCategorizing .category.all { 
    display:none; 
} 

tức là, nó có nghĩa rằng div với class (es) .category.all nên được ẩn nếu nó mẹ (s) có lớp .isCategorizing

Bây giờ trong jquery nếu tôi chuyển đổi khả năng hiển thị của phần tử .category.all một kiểu nội tuyến được thêm vào HTML được ưu tiên hơn CSS trong tệp .css !! Vì vậy, ngay cả khi ở trên đúng là giá trị hiển thị từ kiểu nội tuyến dường như được ưu tiên và phần tử KHÔNG bị ẩn. Đang hiển thị jquery add của style=display:list-item; vào div trong khi CSS của tôi sẽ ẩn nó ...

Tôi có thể xử lý điều này trong jQuery thuần túy nhưng có quá nhiều trạng thái và kiểm tra để đảm bảo rằng nó hoạt động theo cách cụ thể như cũng như duy trì một cờ boolean để "nhớ" nếu trạng thái đó tồn tại và liệu có trở lại trạng thái đó không. Cách tiếp cận CSS đơn giản và sạch hơn nhiều, nhưng phong cách nội tuyến là một chút khó chịu ...

... cách tốt nhất để giải quyết vấn đề này? Tôi đã thử tạo một lớp khác .hide và bật lên với jquery. Có vẻ để làm việc nhưng đối với một số lý do vít lên vị trí của yếu tố của tôi. Tôi đang chơi với nó nhưng dường như không thể tìm thấy một giải pháp sạch cho vấn đề này. Lời khuyên nào ??

Cập nhật:

Đây là CSS tương ứng:

.category{ 
     position:relative; 
     padding:1px; 
     margin:2px 0 5px 0; 
     clear:both; 
     font-family:arial, sans-serif; 
     font-size: 14px; 
     display:inline-block; 
     width:inherit; 
    } 


.category.all { 
     display:none; 
     width:200px; 
     text-align: center; 
     padding:3px; 
     border:2px solid transparent; 
     border-radius: 4px; 
     background-color: #DDDFE3; 
    } 

LƯU Ý: Một toggleClass đơn giản không hoạt động trong trường hợp này - chuyển đổi qua lại "tất cả" sẽ gây ra các nút được có thể nhìn thấy ngay cả khi nó không được. Thứ hai, tôi đang kế thừa một vài đạo cụ từ lớp .category vì nút này được hiển thị ở cuối danh sách danh mục 'để nói và muốn ngăn trùng lặp.

Nếu tôi đi với toggleClass và chỉ lặp lại trong các đạo cụ nó có thể làm việc, về tư tưởng thứ hai ... lemme thử này và gửi một bản cập nhật

Answer 1

Sau khi tất cả các giải thích có vẻ như rằng:

• Nếu nút có .all, bạn muốn nó được ẩn (cho dù phụ huynh có .isCategorizing)
• Nếu nút không có .all, bạn muốn nó được ẩn khi và chỉ khi phụ huynh có isCategorizing

Nếu đúng như vậy, cách đơn giản nhất là đảo ngược ý nghĩa của lớp all và sử dụng lớp học partial ở vị trí của nó.Sau đó bạn có thể làm:

.category { 
    display: none; 
} 

.category.partial { 
    display: inline-block; 
} 

.isCategorizing .category.partial { 
    display: none; 
} 

Nếu scrapping .all sẽ giới thiệu các vấn đề trong mã khác mà bạn không hiển thị ở đây, bạn có thể tiếp tục sử dụng nó và cũng giới thiệu .partial (trong trường hợp mà tôi muốn nó được đặt tên là .not-all sao cho mối quan hệ rõ ràng hơn đối với người bảo trì). Bạn có thể làm điều này bằng cách:

1. Thêm toggleClass('.not-all') đến một hoặc hai nơi mà bạn đã có toggleClass('.all'), và
2. Moving phong cách setters display CSS bên selectors mới sẽ được kích hoạt bởi các lớp mới not-all