【发布时间】：2022-01-09 05:16:29
【问题描述】：
在我的投资组合网站上，我有一个全宽的项目列，我希望在单击标题时，项目显示 /.content 向下滑动切换。单击任何其他项目时，前一个活动项目会向上滑动并关闭，而新项目会显示。在点击时定位单个项目的最佳方式是什么？
我已经尝试了几件事，从为 Title-Line-01 分配父级，到直接切换 jQuery，到为我读过的每个项目分配不同的代码。通过 Stack Overflow 上的几篇文章。但是我仍然没有达到我想要的结果。在下面的代码中单击任何标题 - 每个项目都会显示。
$(document).ready(function(){
$(".content").hide();
$(".Title-line-01").click(function(){
$(this).find('.content').toggle();
});
});* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
@font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail@cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</class>
<div class="Title-line-02">
</class>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html> 【问题讨论】：
-
我以前做过，但是很麻烦。我建议尝试使用 bootstrap 手风琴。它为您完成所有艰苦的工作：getbootstrap.com/docs/5.0/components/accordion/#how-it-works
-
对于初学者，您的 HTML 无效。没有
</class>标签，你有几个
标签： javascript jquery toggle