单击幻灯片时 div 折叠

Posted

技术标签:

【中文标题】单击幻灯片时 div 折叠【英文标题】：div collapses when slideshow is clicked 【发布时间】：2022-01-09 15:47:21 【问题描述】：

我有这段代码几乎可以按照我想要的方式工作。这是一个投资组合网站，点击每个 .Title-line 时，div 会切换并显示幻灯片，页面的访问者可以在其中浏览项目。

我现在的问题是，当项目切换并单击幻灯片中的箭头时，整个 div 会立即关闭。

是否可以修改 javascript，使每个 .Title-line 都分配一个 div，并且只有当有人在它们之外单击时，div 才会再次折叠？

var iShown = 0;

function Show_Content(iContent) 
  if (iShown > 0) 
    document.getElementById("content" + iShown).style.display = "none";
  

  if (iContent !== iShown) 
    document.getElementById("content" + iContent).style.display = "block";
    iShown = iContent;
   else 
    iShown = 0;
  

* 
  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: none;
  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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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 onclick="Show_Content(1)" class="Project">
  <div class="Title-line">
    <div class="Title-line-01">
      <p>Region H</p>
    </div>

    <div class="Title-line-02">

    </div>

    <div class="Title-line-03">

    </div>

    <div class="Title-line-04">
      <p>2021</p>
    </div>

  </div>
  <div id="content1" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
      </div>
    </div>

  </div>
</div>

<div onclick="Show_Content(2)" 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 id="content2" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
      </div>
    </div>
  </div>
</div>


<div onclick="Show_Content(3)" 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 id="content3" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
      </div>
    </div>
  </div>

</div>


<div onclick="Show_Content(4)" 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 id="content4" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 3)">&#10095;</a>
      </div>
    </div>
  </div>

</div>


<div onclick="Show_Content(5)" 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 id="content5" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 4)">&#10095;</a>
      </div>
    </div>
  </div>
</div>



<div onclick="Show_Content(6)" 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 id="content6" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 5)">&#10095;</a>

      </div>
    </div>

  </div>
</div>

<div onclick="Show_Content(7)" 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 id="content7" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 6)">&#10095;</a>

      </div>
    </div>
  </div>
</div>


<div onclick="Show_Content(8)" 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 id="content8" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 7)">&#10095;</a>
      </div>
    </div>

  </div>
</div>


<div onclick="Show_Content(9)" 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 id="content9" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 8)">&#10095;</a>

      </div>
    </div>
  </div>
</div>


<div onclick="Show_Content(10)" 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 id="content10" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 9)">&#10095;</a>

      </div>
    </div>
  </div>
</div>

【问题讨论】：

【参考方案1】：

如果你想关闭一个项目而不打开另一个项目，你只需将 onclick 一个 div 向下移动代码：

<div onclick="Show_Content(1)" class="Project">
    <div class="Title-line">

应该变成：

<div class="Project">
    <div onclick="Show_Content(1)" class="Title-line">

现在这是一段 javascript，为了仅在您打开另一个项目时关闭项目而修复：

var iShown = 0;

function Show_Content(iContent) 
    if (iShown == 0) 
        document.getElementById("content" + iContent).style.display = "block";
     else if (iContent !== iShown) 
        document.getElementById("content" + iShown).style.display = "none";
        document.getElementById("content" + iContent).style.display = "block";
    
    iShown = iContent;

如果你只更改javascript，一个项目一旦打开就永远不会关闭。

如果您更改 javascript 和 onclick 事件的位置（您必须将 onclick 事件从外部 div 类“Project”移动到内部 div 类“Title-line”），那么您可以关闭一个再次单击该项目，或打开另一个项目。

【讨论】：

抱歉，回复晚了。太感谢了。 :) 不客气 :-) 但是你忘了接受答案... :-)【参考方案2】：

要执行您需要的操作，您可以使用 DOM 遍历在点击的 .project 中找到 .content。您可以从那里添加一个类来显示它，同时从所有其他.content 元素中删除同一个类。试试这个：

let $content = $('.content');

let $projects = $('.Project').on('click', e => 
  let $target = $(e.currentTarget).find('.content').addClass('active');
  $content.not($target).removeClass('active');
);
* 
  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;
  text-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 */

.Project.active 
  display: block;

.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: none;
  flex-direction: row;
  flex-direction: wrap;

.content.active 
  display: block;



/* 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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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>
    </div>
    <div class="Title-line-02"></div>
    <div class="Title-line-03"></div>
    <div class="Title-line-04">
      <p>2021</p>
    </div>
  </div>
  <div id="content1" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
      </div>
    </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 id="content2" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 1)">&#10095;</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 id="content3" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 2)">&#10095;</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 id="content4" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 3)">&#10095;</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 id="content5" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 4)">&#10095;</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 id="content6" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 5)">&#10095;</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 id="content7" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 6)">&#10095;</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 id="content8" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 7)">&#10095;</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 id="content9" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 8)">&#10095;</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 id="content10" 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)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 9)">&#10095;</a>

      </div>
    </div>
  </div>
</div>

【讨论】：

以上是关于单击幻灯片时 div 折叠的主要内容，如果未能解决你的问题，请参考以下文章

jquery幻灯片-slideToggle

Vue js引导程序在折叠时添加动画

AngularJs ul 使用幻灯片动画展开/折叠

jQuery 幻灯片一次切换一个 div 而不是全部独立

我可以使 div 透明，但可点击 [重复]

jQuery滑过2个div