两个主要问题是子类别没有显示，并且根据类别过滤图像也不起作用。
我期望按如下方式过滤图像：全部、城市主义、建筑和室内。当您单击每个类别时，它会显示子类别，并相应地过滤图像。这是为了显示哪些图像属于什么，但是，我不知道为什么它不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AAC - Projects</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.bundle.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link
rel="stylesheet"
href="path/to/font-awesome/css/font-awesome.min.css"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="images/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="images/favicon-16x16.png"
/>
<link rel="manifest" href="images/site.webmanifest" />
<link href="styles/stylesheet.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/miragestylesheet.css" />
<link rel="stylesheet" href="styles/projects.css" />
</head>
<body>
<nav class="navbar fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img
class="logo"
src="images/aac BLACK GREY 2023.png"
alt=""
srcset=""
style="width: 120px; height: 120px"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar"
>
<div class="hamburger">
<div class="top-bun"></div>
<div class="meat"></div>
<div class="bottom-bun"></div>
</div>
</button>
<div
class="offcanvas offcanvas-end"
tabindex="-1"
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
>
<div class="offcanvas-header">
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="career.html">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="futiristic.html">Futiristic</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="about_section">
<br />
<h1>projects</h1>
<ul class="switcher">
<li data-cat=".all" class="active">All</li>
<li data-cat=".urb" id="show">
Urbanism
<ul class="switcher" id="content" style="display: none">
<li data-cat=".cityscale">City Scale</li>
<li data-cat=".residential">Residential</li>
<li data-cat=".entertainment">Entertainment</li>
</ul>
</li>
<li data-cat=".arch" id="showarch">
Architecture
<ul class="switcher" id="contentarch" style="display: none">
<li data-cat=".adminstrative">Adminstrative</li>
<li data-cat=".commercial">Commercial</li>
<li data-cat=".hospitality">Hospitality</li>
<li data-cat=".residential">Residential</li>
<li data-cat=".educational">Educational</li>
<li data-cat=".cultural">Cultural</li>
<li data-cat=".entertainment">Entertainment</li>
<li data-cat=".medical">Medical</li>
<li data-cat=".religious">Religious</li>
<li data-cat=".restoration">Restoration</li>
<li data-cat=".infrastructure">Infrastructure</li>
</ul>
</li>
<li data-cat=".int" id="showint">
Interior Design
<ul class="switcher" id="contentint" style="display: none">
<li data-cat=".residential">Residential</li>
<li data-cat=".commercial">Commercial</li>
<li data-cat=".cultural">Cultural</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<div class="container large">
<div class="gallery">
<a href="index.html"
><img
class="all urb residential"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb cityscale"
src="images/12pp.jpg"
alt="Sample photo"
/></a>
</div>
</div>
<div class="small">
<main class="grid">
<a href="index.html"
><img class="all urb cityscale" src="images/1.jpg" alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb residential"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all arch"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
</main>
</div>
<br />
<br />
<div class="footer">
<div class="row">
<div class="col-12">
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://wa.me/+201111007091?text=urlencodedtext"
role="button"
><i class="fab fa-whatsapp" aria-hidden="true"></i
></a>
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.instagram.com/aac.consultant/"
role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.linkedin.com/company/arab-american-consultants/about/?viewAsMember=true"
role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Behance -->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.behance.net/60fd0eab"
role="button"
><i class="fa-brands fa-behance"></i
></a>
<!-- Pinterest-->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.pinterest.com/ArabAmericanConsultants/"
role="button"
><i class="fa-brands fa-pinterest"></i
></a>
</div>
</div>
<br />
<div class="row">
<div class="col-12" style="font-family: 'made_miragethin'">
© 2023 Arab American Consultants . All Rights Reserved.
</div>
<br />
<br />
</div>
</div>
<script src="projects.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function () {
let switcherLi = document.querySelectorAll(".switcher li");
let imgs = document.querySelectorAll(".gallery img");
switcherLi.forEach((li) => {
li.addEventListener("click", () => {
switcherLi.forEach((li) => li.classList.remove("active"));
li.classList.add("active");
filter(li.dataset.cat);
});
});
function filter(category) {
imgs.forEach((img) => {
img.style.display = "none";
});
if (category === ".all") {
imgs.forEach((img) => {
img.style.display = "block";
});
} else {
let subcategories = document.querySelector(`${category} ul`);
if (subcategories) {
subcategories.querySelectorAll("li").forEach((subcategory) => {
let subcategoryType = subcategory.dataset.cat;
document.querySelectorAll(subcategoryType).forEach((el) => {
el.style.display = "block";
});
});
} else {
document.querySelectorAll(`${category}`).forEach((el) => {
el.style.display = "block";
});
}
}
}
});
@import url("https://fonts.googleapis.com/css2?family=Advent+Pro&family=Amatic+SC&family=Bricolage+Grotesque:[email protected]&family=Cardo&family=Comfortaa:wght@300&family=Domine&family=Gruppo&family=Indie+Flower&family=Kodchasan:wght@300;500&family=Lato&family=Oswald&family=Playfair+Display+SC&family=Playfair+Display:wght@500&family=Roboto:wght@100&family=Rubik:ital,wght@1,300&family=Syncopate:wght@400;700&family=Urbanist&display=swap");
* {
font-family: "laluxesserifw05-regularRg";
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "MADEMirage-Thin";
src: url("MADEMirage-Thin.ttf.woff") format("woff"),
url("MADEMirage-Thin.ttf.svg#MADEMirage-Thin") format("svg"),
url("MADEMirage-Thin.ttf.eot"),
url("MADEMirage-Thin.ttf.eot?#iefix") format("embedded-opentype");
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-family: "made_miragethin";
}
section {
padding-top: 30px;
height: 100vh;
display: flex;
justify-content: center;
scroll-snap-align: start;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.navbar-brand {
margin-right: 0;
}
.navbar-nav {
align-items: center;
}
.navbar .navbar-nav .nav-link {
color: black;
font-size: 1.1em;
padding: 0.5 1em;
}
.nav-item {
font-size: 14px;
font-weight: Regular;
}
.about_section {
padding-top: 80px;
padding-left: 30px;
padding-right: 30px;
text-align: center;
justify-content: center;
}
.about_section h1 {
text-align: center;
}
.footer {
text-align: center;
}
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
width: 100vw;
height: 100vh;
display: grid;
gap: var(--g);
width: calc(7 * var(--s) + 6 * var(--g));
aspect-ratio: 1;
grid-template-columns: repeat(3, auto);
}
.gallery > a {
display: contents;
}
.gallery img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: 0.35s linear;
}
.gallery img:hover {
filter: grayscale(0);
width: calc(var(--s) * var(--f));
height: calc(var(--s) * var(--f));
}
body {
margin: 0;
display: grid;
place-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 700px) {
div.large {
display: none;
}
}
/***** for mobiles *****/
@media (min-width: 699px) {
.cont {
display: none;
}
}
@media (min-width: 699px) {
div.small {
display: none;
}
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
max-width: 100%;
margin-left: 5px;
}
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
justify-content: center;
gap: 10px;
}
.grid div {
max-height: 300px;
}
.switcher {
position: relative;
margin: 0 auto;
display: flex;
list-style: none;
width: fit-content;
align-items: stretch;
padding: 10px 10px;
justify-content: space-evenly;
width: 90vw;
}
.switcher li {
border-radius: 4px;
padding: 10px 10px;
background-color: white;
cursor: pointer;
transition: 0.2s linear;
font-size: 12px;
user-select: none;
margin: 5px;
justify-content: center;
align-items: center;
display: flex;
display: inline-block;
cursor: pointer;
}
.content div {
display: none;
margin-top: 10px;
}
.switcher .switcher {
position: absolute;
z-index: 9999;
width: 90vw;
left: 0;
}
.switcher ul li ul {
list-style-type: circle;
}
/* .navbar*/
.hamburger {
display: flex;
align-self: center;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 26px;
cursor: pointer;
}
.hamburger div {
align-self: flex-end;
height: 2px;
width: 100%;
background-color: black;
mix-blend-mode: difference;
}
.hamburger .meat {
width: 70%;
transition: all 200ms ease-in-out;
}
.hamburger .bottom-bun {
width: 90%;
transition: all 400ms ease-in-out;
}
.hamburger:hover div {
width: 100%;
background-color: black;
mix-blend-mode: difference;
}
.hamburger:hover .top-bun {
animation: burger-hover 1s infinite ease-in-out alternate;
}
.hamburger:hover .meat {
animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
}
.hamburger:hover .bottom-bun {
animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
}
@keyframes burger-hover {
0% {
width: 100%;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
border: none;
box-shadow: none;
}
.switcher {
position: relative;
margin: 0 auto;
display: flex;
list-style: none;
width: fit-content;
align-items: stretch;
padding: 10px 10px;
justify-content: space-evenly;
width: 90vw;
}
.switcher li {
border-radius: 4px;
padding: 10px 10px;
background-color: white;
cursor: pointer;
transition: 0.2s linear;
font-size: 12px;
user-select: none;
margin: 5px;
justify-content: center;
align-items: center;
display: flex;
display: inline-block;
cursor: pointer;
}
.content div {
display: none;
margin-top: 10px;
}
.switcher .switcher {
position: absolute;
z-index: 9999;
width: 90vw;
left: 0;
}
我认为你忘记/错过了一些事情。所有图像的类别都是 urb，如果你更改它们，它就可以工作：
<div class="container large">
<div class="gallery">
<a href="index.html"
><img
class="all urb residential"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all arch entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all int cityscale"
src="images/12pp.jpg"
alt="Sample photo"
/></a>
</div>
</div>
<div class="small">
<main class="grid">
<a href="index.html"
><img class="all urb cityscale" src="images/1.jpg" alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all arch residential"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all int entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all arch"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
</main>
</div>