Accordeon网页滚动错误

Question

我正在我的网站上工作，我无法用javascript问题解决一个问题：

我有一个我现在称之为菜单的accordeon类型的页面，当我点击它们时我可以打开/滑动主题，其中会有更多的信息出现在该主题上。 我在JS中使用平滑滚动。 我将其结构化为＆＃34; accmain＆＃34;对于accordeon和＆＃34; accsub＆＃34;对于单击accmain时出现的内容。 由于我希望两个主题之间的过渡顺利进行，我想要最后一个＆＃34; accmain＆＃34;关闭相应的＆＃34; accsub＆＃34;，然后顺利转到新的＆＃34; accmain＆＃34;，将它对齐在顶部并打开新的＆＃34; accsub＆＃34;。

现在到目前为止一切都很好。 我遇到的唯一问题是，当一个主题仍在打开时打开另一个主题： 它没有将新的accmain与顶部对齐，而是将整个卷轴移动到＆＃34; accsub＆＃34;的高度。之前打开过，但现在应该关闭。因此，新主题并未与顶部对齐，但最终转移到目前为止（取决于最后一个主题及其高度），您无法看到任何内容。 这实际上是一个非常简单的问题我猜，虽然我对javascript非常新，但我知道它正在改变之前accsub的像素数量。这是一个开始：）

这是一个Fiddle

感谢大家，我非常感谢任何帮助。 我现在花了好几个星期才解决这个问题。

＆＃13;

＆＃13;

/* multi-toggle accordion*/
$(document).ready(function() {
  $(".accsub").hide();
  $('.accmain').click(function() {
    $( this ).toggleClass( "miau100" );
    if ($(this).next().is(":visible")) {
      $(this).next().slideUp('fast');
      $('html,body').animate({
        scrollTop: $(this).offset().top - 150
      }, 'slow');
      $( this ).toggleClass( "miau75" );
    } else {
      $('.accsub:visible').slideUp('fast');
      $(this).next().slideDown('fast');
      $('html,body').animate({
        scrollTop: $(this).offset().top
      }, 'slow');
    }
  });
});

/* GO TO TOP BUTTON */
$(document).ready(function() {
  $("a[href='#top']").click(function() {
    $('.accsub:visible').slideUp('fast');
    $("html, body").animate({
      scrollTop: 0
    }, "slow");
    return false;
  });
});

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
header > .accmain {
  height: 150px;
}

p1 > .accmain:hover {
  color: grey
}

footer {
  min-height: 150px;
}

* {
  box-sizing: border-box;
}

.beitrag {}

.accmain {
  display: flex;
  justify-content: center;
  min-height: 3em;
  background-color: #FFF;
  cursor: pointer;
  text-align: left;
  border-bottom: solid 1px #585858;
  padding: 1px;
  color: #585858;
  opacity: 0.75;
}

.accmain:hover {
  /*   background-color: #b3b3b3;  */ 
  transition: ease-in-out 0.7s;
  color: black;
  opacity: 1.0;
}

.miau100 {
  opacity: 1.0;
}

.miau75 {
  opacity: 0.75;
}


.accsub {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* horizontale zentrierung = wenn column dann align-items: center; ansonsten justify-content: center;*/
  background-color: #FFF;
  border-bottom: solid 1px #625750;
  padding-left: 10%;
  padding-right: 10%;
}

.imagewrap img {
  max-height: 100%;
  max-width: 100%;
  margin-bottom: 40px;
}

.topbutton {
  position: fixed;
  width: 50px;
  height: 50px;
  top: 90%;
  left: 90%;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 2em;
  text-decoration: none;
  color: #000;
  transition: ease 0.7s;
}

.topbutton:hover {
  background-color: rgba(0, 0, 0, 0.3);
  transition: ease 0.7s;
}

.text {
  width: 722px;
  font-size: 1em;
}

.newspaper {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: light;
  font-variant: normal;
  font-weight: 300;
  line-height: 26.4px;
  margin-top: 80px;
  margin-bottom: 80px;
  max-width: 722px;
}

.newspaper2 {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: light;
  font-variant: normal;
  font-weight: 500;
  line-height: 26.4px;
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 722px;
}

.newspaper3 {
  -webkit-column-count: 1;
  /* Chrome, Safari, Opera */
  -moz-column-count: 1;
  /* Firefox */
  column-count: 1;
  font-family: Roboto, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 26.4px;
  max-width: 722px;
  align-items: left;
}

h1 {
  font-family: Roboto, sans-serif;
  font-size: 24px;
  font-style: light;
  font-variant: normal;
  font-weight: 500;
  line-height: 26.4px;
}

h2 {
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-style: bold;
  font-variant: normal;
  font-weight: 500;
  line-height: 15.4px;
}

h3 {
  display: inline;
  margin: 0px;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-style: bold;
  font-variant: normal;
  font-weight: 500;
  line-height: 15.4px;
}

p {
  display: inline;
  margin: 0px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 20px;
}

p1 {
  display: inline;
  margin: 0px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 20px;
  color: #A4A4A4;
  margin-left: 10px;
}


pre {
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 18.5714px;
  align-items: left;
}

blockquote {
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 21px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 30px;
}

hr {
  width: 100%;
  height: 1px;
  margin: 0 auto;
  color: black;
}

＆＃13;

<!DOCTYPE html>
<html lang="de-de">

  <meta charset="UTF-8">
  <meta name="Bartek Juretko" content="Künstler">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">


  <body class="all">

    <header>
      <div class="accmain">
        <!-- erstes kind-->
        <div class="text">
          <h2>BARTEK JURETKO</h2></div>
      </div>
      <div class="accsub">

        <div class="newspaper">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
          augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
          nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
          in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor
          cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
          volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
          eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
          id quod mazim placerat facer possim assum.
        </div>
      </div>


    </header>


    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>AStA Cafe<p1>27.01.2015</p1></h1></div>
      </div>
      <div class="accsub">

        <div class="newspaper">Astacafe Hagen, Kunstakademie Duesseldorf
          <br>
          <br>
          <br> Fertigstellung und Eroeffnung
          <br>
          <br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
          <br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
          <br>
          <br> Mit Louisa Rossner, Duesseldorf, 2014-15
          <br>
          <br>
        </div>

        <div class="imagewrap">
          <img src="http://www.umbraframework.de/2270.jpg">
        </div>
      </div>
    </div>


    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Ausführung Service-Theke im Sparta<p1>18.04.2017</p1></h1>
        </div>
      </div>
      <div class="accsub">

        <div class="newspaper2">
          Fertigstellung und Eroeffnung
          <br>
          <br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
          <br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
          <br>
          <br> Mit Louisa Rossner, Duesseldorf, 2014-15
        </div>
        <div class="imagewrap">
          <img src="http://www.umbraframework.de/2270.jpg">
        </div>
      </div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Publikation im Salon Magazin Nr.4<p1>04.2017</p1></h1></div>
      </div>
      <div class="accsub">
        <?php
echo date("d.m.Y H:i:s");
?>
      </div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kunstakademie Düsseldorf Rundgang 2017, Teilnahme<p1>02.2017</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunstakademie.gallery, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>'art-hoc' im Reservat, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>






    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunst kann's 2016, Kunstauktion Teilnahme<p1>11.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunstakademie.gallery, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>TOTAL, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>ad absurdum im HINTERZIMMER, Ausstellung<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Cafe RAT und TAT, Aktion und Ausstellung<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Absolventenstipendium 2016 der Freunde und Förderer<p1>07.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Baukunstkammer, Abschlussausstellung und Akademiebrief<p1>07.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>'art-hoc' in den Ex-Achenbach-Hallen, Ausstellungsteilnahme<p1>03.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Trockenbauwand<p1>04.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Habe Meine Hölzer Sortiert<p1>03.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kunstakdemie Düsseldorf Rundgang 2016, Teilnahme<p1>01.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Nischenpreis, Wettbewerbsteilnahme<p1>01.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Friesenberg Heidelberg, Entwurf<p1>11.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunst kann's 2015, Kunstauktion Teilnahme<p1>11.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Wystawa Plastyki Zagłębia Miedziowego 2015, Ausstellungsteilnahme<p1>08.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>CLASH, Ausstellung<p1>06.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>


    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Ein Europahaus für den Europatag im Düsseldorfer Rathaus<p1>09.2015</p1></h1></div>
      </div>
      <div class="accsub">Entwurf des 'Europahauses' fuer 'We Are Europe' Zum sogenannten Europatag, am 9.Mai, einem Jahrestag der bisher eher als das 'Ende des Zweiten Weltkrieges' bekannt ist, entstand ein Entwurf fuer die von der Organisation 'We Are Europe' geplante
        Aktion aus Kartons ein Haus fuer Europa zu bauen. Die Besucher beteiligten sich aktiv an einer Beschriftung der Bausteine mit Werten, die sie mit Europa verbinden, und bauten so Stein fuer Stein das 'Europahaus' im Duesseldorfer Rathaus. Duesseldorfs
        Oberbuergermeister Thomas Geisel fing mit dem Grundstein an und eroeffnete zusammen mit der NRW-Ministerin Dr. Schwall-Dueren und dem Vorsitzenden von We Are Europe Jens Baganz um 11 Uhr die Aktion. Mit Aneta Dobozi, Duesseldorf, 2015 2. Foto:
        Melanie Zanin 4. Foto: We Are Europe www.duesseldorf.de www.we-are-europe.org </div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Bauhausmuseum Dessau, Wettbewerbsbeitrag<p1>03.2015</p1></h1></div>
      </div>
      <div class="accsub">

        <div class="imagewrap">
          <img src="http://www.umbraframework.de/2270.jpg">
        </div>
        <div class="text">
          <div class="newspaper2">
            <br>Teilnahme Realisierungswettbewerb
            <br>
            <br>Staedtebaulich wirkt das Museum wie ein Solitaer umgeben von Vegetation, differenziert betrachtet unterscheiden sich die Geschosse: das Erdgeschoss adaptiert die Baufluchten der Ratsgasse, positioniert zwei Baukoerper in der Verlaengerung
            der sich in der Ratsgasse gegenueberstehenden Fassadenreihen und schafft dazwischen einen Hof, als gleich einen Durchgang zum Park in direkter Forfuehrung der Ratsgasse. Wie im Cartesischen Dualismus stehen sich im Erdgeschoss zwar zwei Entitaeten
            gegenueber, werden aber im oberen Geschoss miteinander vereint zu einem einheitlichen Ganzen: der Ausstellungshalle, die als Buegel ueber beiden erdgeschossigen Koerpern schwebt. Es ist ein komplimentaeres Tor: von der Stadt zum Park und vom
            Park zur Stadt. Die Ausstellunghalle ist ganz bewusst angelehnt an den Gedanken von grossen Messehallen, die Flexibilitaet und Moeglichkeiten bewahren, um der Ausstellungsarchitektur mehr Freiraum zu lassen.
            <br>
            <br>Dessau, 2015</div>
        </div>
      </div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kunstakademie Düsseldorf Rundgang 2015, Teilnahme<p1>02.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>AStA Cafe Hagen, Fertigstellung<p1>01.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Helsinki Guggenheim Museum, Wettbewerbsteilnahme<p1>10.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kleine Brötchen Backen, Performance<p1>08.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Jaana Caspary VERSUS Bartek Juretko, Ausstellung<p1>08.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>AStA Cafe Hagen in der Kunstakademie, Entwurf<p1>04.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>17,98 EUR<p1>02.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Mercedes-Benz, Workshop<p1>2013/2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Gestaltung Rundgangscafe, Vorschlag<p1>12.2013</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Gerresheimer 100, Ausstellung<p1>10.2013</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Den Toten Ihre Namen Geben, Engere Auswahl Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Faerber, Ausstellungsteilnahme</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Stadt der Zukunft, Workshop</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Stadthaus in Wien, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Upcycling Berlin, Ausstellungsteilnahme</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Keine Kunst</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Brücke im Landschaftsschutzgebiet, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Upcycling Berlin, Wettbewerbsgewinn</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Keine Kunst</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Bibliothek in Daegu, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Findlinge Seminar auf der Architektur Biennale in Venedig</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Keine Kunst</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Architektur AG an der GGS Marienstrasse</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Entwurf Mehrfamilienwohnhaus in Indien</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Autodidaktische Weltkarte</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Neuer Entwurf für ein Grabmal</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Ny Valer Kirke, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <p>Impressum</p>
        </div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap">
      </div>
    </div>

    <div>
      <a href="#top" class="topbutton">&#x2303;</a>
    </div>

    <footer>
      <a href="#top">Zum Anfang der Seite Scrollen</a>
    </footer>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

也许这可能是你的解决方案：

$(document).ready(function(){

$(".accsub").hide();
    $(".accmain").click(function(){
    $(".accsub").hide();
        $(this).next(".accsub").slideToggle("fast");
    $('html, body').animate({
        scrollTop: $(this).offset().top - 1
    }, 'slow');
    });

});

我想你想在每次klick上将accmain-容器对齐到浏览器的顶部。 并且不要忘记把＆＃34; GO TO TO THE TOP＆＃34;在$(document).ready(function(){YOUR ENTIRE CODE GOES HERE}内，以便您的代码等待加载文档。