div 单击幻灯片时折叠

Question

我有这段代码，几乎可以按我想要的方式工作。这是一个投资组合网站，点击每个 .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>

Answer 1

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

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>

Answer 2

如果您想关闭一个项目而不打开另一个项目，只需将 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、class“项目”移到内部, class "Title-line"), 然后您可以通过再次单击项目或打开另一个项目来关闭项目。

div 单击幻灯片时折叠

div collapses when slideshow is clicked

javascript

jquery

toggle