javascript - Accordion 网页滚动错误-6ren

javascript - Accordion 网页滚动错误

转载作者：行者123 更新时间：2023-11-28 03:39:04

我正在我的网站上工作，但我无法解决我遇到的一个 javascript 问题:

我有一个 Accordion 类型的页面，我现在称之为菜单，当我点击它们时我可以打开/向下滑动主题，那里将显示关于该主题的更多信息。我正在使用在 JS 中完成的平滑滚动。我将其结构化为 Accordion 的“accmain”和单击accmain 时出现的内容的“accsub”。由于我希望两个主题之间的过渡平滑，所以我希望最后一个“accmain”关闭相应的“accsub”，然后顺利转到新的“accmain”，将其对齐顶部并打开新的“accsub”。

现在到目前为止一切都很好。我遇到的唯一问题是，当您打开另一个主题时，另一个主题仍处于打开状态:它不会将新的 accmain 对齐到顶部，而是将整个滚动移动到之前打开但现在应该关闭的“accsub”的高度。因此，新主题未与顶部对齐，但最终移动了这么远(取决于最后一个主题及其高度)，以至于您看不到任何内容。我想这实际上是一个非常简单的问题，虽然我对 javascript 非常陌生，但我知道它确实在改变之前的 accsub 像素数量。这是一个开始:)

这是一个Fiddle

谢谢大家，我很感激任何帮助。我现在花了几周的时间来解决这个问题。

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

@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;
}

<!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>

最佳答案

也许这是适合您的解决方案:

$(document).ready(function(){

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

});

我猜你想在每次点击它时将 accmain- 容器与浏览器的顶部对齐。并且不要忘记在 $(document).ready(function(){YOUR ENTIRE CODE GOES HERE} 中放置“GO TO THE TOP”，以便您的代码等待文档加载.

关于javascript - Accordion 网页滚动错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44323833/

文章推荐： css - 如何删除 Wordpress 主页底部的 "Older Posts"选项？

文章推荐： c++ - 从返回 int c++ 的函数中获取二维数组

文章推荐： c++ - Qt 线程似乎并没有在核心上平均共享

文章推荐： javascript - Canvas 游戏的滞后运动

java - 使用 selenium webdriver 从屏幕 A(网页)跳转到屏幕 B(网页)，绕过中间屏幕(网页)
这个问题与窗口处理或多个浏览器窗口的杂耍无关，而是关于在同一窗口中浏览 Web 应用程序的网页。我遇到这样的情况 1.我导航为屏幕 A->屏幕 x->屏幕 Y->屏幕 B 2.我需要捕获首次登录时屏幕
网页:系统会记录用户显示每个页面的时长
我有这个要求: The system will record the length of time the user displayed each page. 虽然在富客户端应用程序中微不足道，但我不
JavaScript 网页
我在调试 JavaScript 网页时遇到问题。我遇到困难的地方是我标记 (...) 的地方。我收到未定义的错误。我是否将函数 countDown(start, Increment) 中的参数(即 s
网页 |屏幕中央菜单栏
需要一些帮助。我刚开始学习 HTML，今天一直在研究如何制作菜单，但在这样做时遇到了问题。我似乎不知道如何在屏幕上居中显示菜单。这就是我目前所拥有的； Home
javascript - 我想通过单击按钮将小程序的任何参数发送到浏览器。 (网页)
我想通过单击按钮将小程序的任何参数发送到浏览器。 (HTML)。我知道按钮对象有一些方法，但不知道使用哪个。我怎样才能做到这一点？ps .: 我使用的是 jnlp 协议(protocol)。类似于:
java - 使用维基百科数据时如何提高性能？网页？
我应该使用Wikipedia的文章链接数据转储从组织的网站中提取代表性术语。为此，我已经- 抓取并下载了该组织的网页。 (〜110,000) 创建了Wikipedia ID和术语/标题的字典。 (约
javascript - 我如何从android调用javascript函数(网页)？
我的网页中包含 javascript 函数... function callFromAndroid(varName) { alert("call from android activated by
java - 用java编辑html/网页
我想创建一个 Java 应用程序，允许用户导入网页并能够在程序中对其进行编辑。导入网页将对其进行渲染，并且页面的组件(图像、文本等)将是可编辑或可拖动的，从而允许用户重新布局组件。例如，用户可以加
java - 将scrollPane添加到EditorPane(网页)
当我们按下按钮时，我向 JFrame 添加了一个网页(网页在同一框架中打开)。效果很好。但我想向其中添加一个scrollPane，但是当我添加 JScrollPane jsp = new JScrol
javascript - 网页 |定心
我在使用 particles.js 时无法将图像居中。图像居中，但略微偏离中心。为什么要这样做，我如何才能将它居中？ html particles.js demo CSS
javascript - 加载页面时如何修复音频不自动播放？ - 网页
我正在尝试在加载页面时播放音频，它应该非常简单但我无法完成。问题是它没有播放，我尝试检查自动播放的状态(真/假)，它说它在页面加载时播放，尽管它没有播放，还尝试制作一个将改变自动播放的功能状态为
javascript - 显示选定的图像、网页
我正在尝试显示用户从列表中选择的图像，但我在屏幕上看不到任何内容。 .container { position: relative; } .ce
html - Bootstrap 网页
这听起来有点奇怪，但我需要一些帮助，网页必须有一行必须包含三个部分，第一部分必须有 1 列的偏移量，并且部分之间的空间必须是 10px到目前为止，使用 Bootstrap 一切顺利。现在第二行将有
html - 网页 - 以毫米为单位的图像大小
这个问题在这里已经有了答案: Web and physical units (2 个答案) Div width in cm (inch) (6 个答案) 关闭 9 年前。
javascript - 网页。背景是如何构建的。
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
css - IPython笔记本设置笔记本面板的宽度(网页)
我想将我的 IPython 笔记本的宽度设置为 2500 像素，并且我希望它左对齐。我该怎么做？我使用这段代码来应用我自己的 CSS: from IPython.core.display impor
Javascript |网页 |饼图状态
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
javascript - 如何接受姓名和号码输入并将其添加到文档/网页
我在 Word 中制作了一份文档，希望人们在其中添加自己的姓名以及他们的教学经验。我已将其保存为网页并发布到此处: http://epicforum.net/TS ...但操作部分实际上就是这样: h
javascript - 按下空格键时触发按钮单击(网页)
这个问题在这里已经有了答案: Execute JS code after pressing the spacebar (5 个答案) 关闭 4 年前。
javascript - 要求用户先登录 - 网页
我正在开发一个只有两个页面的网站。 1.登录 2.首页我正在使用 Angular 框架。 app.config(['$routeProvider', function ($routeProvider

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Accordion 网页滚动错误