Как я могу изменить свой код так, чтобы при сворачивании div он закрывался без прыжка.Я хочу, чтобы div закрывался, не спрыгивая с кнопки - PullRequest
Новая
       23

Как я могу изменить свой код так, чтобы при сворачивании div он закрывался без прыжка.Я хочу, чтобы div закрывался, не спрыгивая с кнопки

0 голосов
/ 30 января 2019

Я хочу, чтобы он не подпрыгивал при нажатии кнопки закрытия

Я поместил 3 кнопки свертывания.Они липкие на свитке.Когда я переключаю их, чтобы закрыть прыжок divs.Как я могу удержаться от прыжка при закрытии тумблера.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>dummy text</title>


    <!-- font awesome cdn-->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />

    <!-- bootstrap css-->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />


    <style>


html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', sans-serif;
  max-width: 480px;
  min-width: 320px;
  margin: 0px auto;
}
ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #333;
}
a:visited {
  text-decoration: none;
}

h1 {
  font-size: 1.5rem !important;
}

h2 {
  letter-spacing: 0px;
  word-spacing: -2px;
  line-height: 1.1;
  font-size: 2.1rem;
}

h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0px !important;
}

h1,
h2,
h3,
h4 {
  font-weight: 900;
}
.header-logo {
  width: 160px;
  vertical-align: middle;
}

.navbar-brand {
  width: 50%;
}
.navbar-toggler {
  width: 48px;
  height: 28px;
  background-color: #fff;
  border: none !important;
  margin-top: 2px;
}
.navbar-toggler .line {
  width: 100%;
  float: left;
  height: 2px;
  background-color: #000;
  margin-bottom: 5px;
}

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

.img-responsive2 {
  max-width: 50%;
  height: auto;
  display: block;
}

.applyBtn {
  background: black;
  color: white;
  border-radius: 8px;
  width: 149px;
  letter-spacing: 0px;
  font-size: 0.8em;
  font-weight: 500;
}

.cardCol {
  padding: 1px !important;
}

.card {
  background-color: rgba(0, 0, 0, 0) !important;
  border: none;
  border-radius: 0px !important;
}

.card-text {
  text-align: center;
  padding: 0px !important;
  font-size: 0.8em;
  line-height: 1.2em;
}

.card-body {
  width: 340px;
  text-align: center;
  transition: height 0.66s ease-out;
}

.card-title {
  text-align: center;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.detailBtn {
  color: black;
  border-radius: 0px !important;
  width: 100%;
  font-weight: 900;
  height: 45px;
  text-align: left;
  font-size: 0.7em;
  background: rgba(0, 0, 0, 0);
  border-right: 1px #fff solid;
}

.detailrow {
  background: rgba(0, 0, 0, 0.2);
}

.img-responsiveArrowIcon {
  width: 16px;
  border-radius: 0px;
}

.collapsebtn {
  border-radius: 0em !important;
  background: rgba(0, 0, 0, 0);
}

.Sec5ListTitle {
  font-weight: 900;
}

.termscond {
  font-size: 0.5em;
  line-height: 1.8em;
}

/* collapse btn */
.cheader .fa {
  transition: 0.3s transform ease-in-out;
}
.cheader .collapsed .fa {
  transform: rotate(-90deg);
  transform-origin: center center;
}

.fa-chevron-down {
  padding: 10px;
}

/* -- sticky css here-- */




dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
 /* background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;*/
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  /*  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;*/

}

dd + dd {
 /*  border-top: 1px solid #CCC; */

}

.card-body {
  z-index:-99;
}

    </style>
  </head>

  <body>
    <div class="container" id="mainwrapper">


      <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae deleniti praesentium porro veritatis cumque quisquam voluptate voluptates officiis harum quo? Aspernatur modi consequuntur dolores quod expedita eligendi nam impedit, fugiat quidem asperiores nobis officia. Ipsa quod eligendi ea minus itaque aliquid repellendus excepturi in, labore quo aliquam, tempora molestiae sit cumque doloribus tempore repudiandae. Quibusdam quae inventore labore iusto recusandae sapiente explicabo dicta ipsa tempora doloribus alias adipisci quas voluptates, eaque non repudiandae ad expedita molestias quam ex illo fugit! Tenetur nesciunt porro provident nostrum quas dolorem dolor explicabo laudantium molestiae libero. Sunt, incidunt, cumque illum, est perferendis ipsum tenetur qui nemo quod inventore at libero tempore provident reiciendis obcaecati consectetur culpa veniam aut? Quisquam quibusdam nihil officia id porro, optio voluptatem quia magni saepe, sapiente harum eius corporis cupiditate, expedita explicabo. Ipsa cupiditate nulla nam ducimus eveniet, nobis, fuga voluptates sequi ut eligendi beatae optio ullam aut! A, culpa quas. Officiis laudantium eius reprehenderit similique minus accusamus veniam itaque, facere cumque adipisci quam vero, eaque possimus magni? Id minima quae nemo, corrupti nostrum eaque eveniet esse nesciunt temporibus, beatae perferendis pariatur soluta inventore, eligendi in deleniti doloribus harum quia vero iure ullam! At eveniet quaerat blanditiis tempora et doloremque!</div>

      <dl>


            <dt>
              <p>
                <a class="btn btn-primary" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapse1">
                  Link with href
                </a>

              </p></dt>
            <dd>
              <div class="collapse" id="collapse1">
                <div class="card card-body">

                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. A eos delectus itaque saepe aut minus. Unde labore doloremque cupiditate doloribus itaque, ullam earum iusto neque repudiandae. Harum dolor, aspernatur quam eligendi reiciendis totam magni temporibus autem ut modi qui ipsam aliquam, eos, deleniti sapiente. Qui quibusdam voluptatum adipisci? Quidem, perspiciatis minima beatae officiis quo et reprehenderit nobis voluptatum libero, labore quae ullam voluptas asperiores aliquid dicta tempore alias ratione nulla sint at voluptatem iste. Accusamus iusto veniam inventore consequuntur laborum blanditiis. Quisquam suscipit veniam recusandae eos exercitationem nobis sit eum. Est quibusdam harum alias reprehenderit qui rerum. Provident rerum veritatis alias officia modi aut voluptatem eaque sapiente dolorum quidem facilis ipsa, necessitatibus, eum impedit, quae repudiandae consectetur eos accusantium aliquam magnam qui architecto quas odit sint? Cumque, dolores et sint odio eveniet mollitia error delectus magni cupiditate quae magnam quam tenetur eum illo dicta eius molestiae autem? Ullam, iusto beatae inventore, perferendis unde quisquam sequi quibusdam iste quasi itaque quos quis incidunt nulla libero blanditiis natus ipsum praesentium aliquam! Sapiente maxime odio ut explicabo perferendis dolore enim corporis. Suscipit incidunt tempora sapiente unde ipsum adipisci cumque quo, aperiam iure dolor! Alias magnam amet quia, praesentium eius similique quidem harum quibusdam dicta eveniet placeat ea. Et tenetur reiciendis optio, blanditiis illo molestiae fuga veritatis ducimus consectetur soluta voluptas, laboriosam aliquam eos ullam repudiandae quibusdam exercitationem ut tempore odit maxime reprehenderit iste quisquam. Ipsam molestias delectus accusantium iusto dolorum distinctio esse, ea odio commodi minus fugiat quo. Ab voluptatum consequatur fuga? Laudantium doloribus sed delectus nesciunt atque adipisci expedita similique dolores, amet ratione temporibus ullam deleniti, aut quis! Maxime neque numquam veniam accusamus reiciendis, inventore possimus recusandae velit vitae eligendi consectetur nostrum, ad consequuntur consequatur! Repellendus earum quasi explicabo odit praesentium temporibus aspernatur, maxime quidem officia pariatur doloribus, dicta cum, minima minus!Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                  </div></div>
              </div></dd>





        </dl>



        <dl>


            <dt>
              <p>
                <a class="btn btn-primary" data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
                  Link with href
                </a>

              </p></dt>
            <dd>
              <div class="collapse" id="collapse2">
                <div class="card card-body">

                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. A eos delectus itaque saepe aut minus. Unde labore doloremque cupiditate doloribus itaque, ullam earum iusto neque repudiandae. Harum dolor, aspernatur quam eligendi reiciendis totam magni temporibus autem ut modi qui ipsam aliquam, eos, deleniti sapiente. Qui quibusdam voluptatum adipisci? Quidem, perspiciatis minima beatae officiis quo et reprehenderit nobis voluptatum libero, labore quae ullam voluptas asperiores aliquid dicta tempore alias ratione nulla sint at voluptatem iste. Accusamus iusto veniam inventore consequuntur laborum blanditiis. Quisquam suscipit veniam recusandae eos exercitationem nobis sit eum. Est quibusdam harum alias reprehenderit qui rerum. Provident rerum veritatis alias officia modi aut voluptatem eaque sapiente dolorum quidem facilis ipsa, necessitatibus, eum impedit, quae repudiandae consectetur eos accusantium aliquam magnam qui architecto quas odit sint? Cumque, dolores et sint odio eveniet mollitia error delectus magni cupiditate quae magnam quam tenetur eum illo dicta eius molestiae autem? Ullam, iusto beatae inventore, perferendis unde quisquam sequi quibusdam iste quasi itaque quos quis incidunt nulla libero blanditiis natus ipsum praesentium aliquam! Sapiente maxime odio ut explicabo perferendis dolore enim corporis. Suscipit incidunt tempora sapiente unde ipsum adipisci cumque quo, aperiam iure dolor! Alias magnam amet quia, praesentium eius similique quidem harum quibusdam dicta eveniet placeat ea. Et tenetur reiciendis optio, blanditiis illo molestiae fuga veritatis ducimus consectetur soluta voluptas, laboriosam aliquam eos ullam repudiandae quibusdam exercitationem ut tempore odit maxime reprehenderit iste quisquam. Ipsam molestias delectus accusantium iusto dolorum distinctio esse, ea odio commodi minus fugiat quo. Ab voluptatum consequatur fuga? Laudantium doloribus sed delectus nesciunt atque adipisci expedita similique dolores, amet ratione temporibus ullam deleniti, aut quis! Maxime neque numquam veniam accusamus reiciendis, inventore possimus recusandae velit vitae eligendi consectetur nostrum, ad consequuntur consequatur! Repellendus earum quasi explicabo odit praesentium temporibus aspernatur, maxime quidem officia pariatur doloribus, dicta cum, minima minus!Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                  </div></div>
              </div></dd>





        </dl>


        <dl>


            <dt>
              <p>
                <a class="btn btn-primary" data-toggle="collapse" href="#collapse3" role="button" aria-expanded="false" aria-controls="collapse3">
                  Link with href
                </a>

              </p></dt>
            <dd>
              <div class="collapse" id="collapse3">
                <div class="card card-body">

                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. A eos delectus itaque saepe aut minus. Unde labore doloremque cupiditate doloribus itaque, ullam earum iusto neque repudiandae. Harum dolor, aspernatur quam eligendi reiciendis totam magni temporibus autem ut modi qui ipsam aliquam, eos, deleniti sapiente. Qui quibusdam voluptatum adipisci? Quidem, perspiciatis minima beatae officiis quo et reprehenderit nobis voluptatum libero, labore quae ullam voluptas asperiores aliquid dicta tempore alias ratione nulla sint at voluptatem iste. Accusamus iusto veniam inventore consequuntur laborum blanditiis. Quisquam suscipit veniam recusandae eos exercitationem nobis sit eum. Est quibusdam harum alias reprehenderit qui rerum. Provident rerum veritatis alias officia modi aut voluptatem eaque sapiente dolorum quidem facilis ipsa, necessitatibus, eum impedit, quae repudiandae consectetur eos accusantium aliquam magnam qui architecto quas odit sint? Cumque, dolores et sint odio eveniet mollitia error delectus magni cupiditate quae magnam quam tenetur eum illo dicta eius molestiae autem? Ullam, iusto beatae inventore, perferendis unde quisquam sequi quibusdam iste quasi itaque quos quis incidunt nulla libero blanditiis natus ipsum praesentium aliquam! Sapiente maxime odio ut explicabo perferendis dolore enim corporis. Suscipit incidunt tempora sapiente unde ipsum adipisci cumque quo, aperiam iure dolor! Alias magnam amet quia, praesentium eius similique quidem harum quibusdam dicta eveniet placeat ea. Et tenetur reiciendis optio, blanditiis illo molestiae fuga veritatis ducimus consectetur soluta voluptas, laboriosam aliquam eos ullam repudiandae quibusdam exercitationem ut tempore odit maxime reprehenderit iste quisquam. Ipsam molestias delectus accusantium iusto dolorum distinctio esse, ea odio commodi minus fugiat quo. Ab voluptatum consequatur fuga? Laudantium doloribus sed delectus nesciunt atque adipisci expedita similique dolores, amet ratione temporibus ullam deleniti, aut quis! Maxime neque numquam veniam accusamus reiciendis, inventore possimus recusandae velit vitae eligendi consectetur nostrum, ad consequuntur consequatur! Repellendus earum quasi explicabo odit praesentium temporibus aspernatur, maxime quidem officia pariatur doloribus, dicta cum, minima minus!Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                  </div></div>
              </div></dd>





        </dl>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae deleniti praesentium porro veritatis cumque quisquam voluptate voluptates officiis harum quo? Aspernatur modi consequuntur dolores quod expedita eligendi nam impedit, fugiat quidem asperiores nobis officia. Ipsa quod eligendi ea minus itaque aliquid repellendus excepturi in, labore quo aliquam, tempora molestiae sit cumque doloribus tempore repudiandae. Quibusdam quae inventore labore iusto recusandae sapiente explicabo dicta ipsa tempora doloribus alias adipisci quas voluptates, eaque non repudiandae ad expedita molestias quam ex illo fugit! Tenetur nesciunt porro provident nostrum quas dolorem dolor explicabo laudantium molestiae libero. Sunt, incidunt, cumque illum, est perferendis ipsum tenetur qui nemo quod inventore at libero tempore provident reiciendis obcaecati consectetur culpa veniam aut? Quisquam quibusdam nihil officia id porro, optio voluptatem quia magni saepe, sapiente harum eius corporis cupiditate, expedita explicabo. Ipsa cupiditate nulla nam ducimus eveniet, nobis, fuga voluptates sequi ut eligendi beatae optio ullam aut! A, culpa quas. Officiis laudantium eius reprehenderit similique minus accusamus veniam itaque, facere cumque adipisci quam vero, eaque possimus magni? Id minima quae nemo, corrupti nostrum eaque eveniet esse nesciunt temporibus, beatae perferendis pariatur soluta inventore, eligendi in deleniti doloribus harum quia vero iure ullam! At eveniet quaerat blanditiis tempora et doloremque!</div>


<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae deleniti praesentium porro veritatis cumque quisquam voluptate voluptates officiis harum quo? Aspernatur modi consequuntur dolores quod expedita eligendi nam impedit, fugiat quidem asperiores nobis officia. Ipsa quod eligendi ea minus itaque aliquid repellendus excepturi in, labore quo aliquam, tempora molestiae sit cumque doloribus tempore repudiandae. Quibusdam quae inventore labore iusto recusandae sapiente explicabo dicta ipsa tempora doloribus alias adipisci quas voluptates, eaque non repudiandae ad expedita molestias quam ex illo fugit! Tenetur nesciunt porro provident nostrum quas dolorem dolor explicabo laudantium molestiae libero. Sunt, incidunt, cumque illum, est perferendis ipsum tenetur qui nemo quod inventore at libero tempore provident reiciendis obcaecati consectetur culpa veniam aut? Quisquam quibusdam nihil officia id porro, optio voluptatem quia magni saepe, sapiente harum eius corporis cupiditate, expedita explicabo. Ipsa cupiditate nulla nam ducimus eveniet, nobis, fuga voluptates sequi ut eligendi beatae optio ullam aut! A, culpa quas. Officiis laudantium eius reprehenderit similique minus accusamus veniam itaque, facere cumque adipisci quam vero, eaque possimus magni? Id minima quae nemo, corrupti nostrum eaque eveniet esse nesciunt temporibus, beatae perferendis pariatur soluta inventore, eligendi in deleniti doloribus harum quia vero iure ullam! At eveniet quaerat blanditiis tempora et doloremque!</div>


<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae deleniti praesentium porro veritatis cumque quisquam voluptate voluptates officiis harum quo? Aspernatur modi consequuntur dolores quod expedita eligendi nam impedit, fugiat quidem asperiores nobis officia. Ipsa quod eligendi ea minus itaque aliquid repellendus excepturi in, labore quo aliquam, tempora molestiae sit cumque doloribus tempore repudiandae. Quibusdam quae inventore labore iusto recusandae sapiente explicabo dicta ipsa tempora doloribus alias adipisci quas voluptates, eaque non repudiandae ad expedita molestias quam ex illo fugit! Tenetur nesciunt porro provident nostrum quas dolorem dolor explicabo laudantium molestiae libero. Sunt, incidunt, cumque illum, est perferendis ipsum tenetur qui nemo quod inventore at libero tempore provident reiciendis obcaecati consectetur culpa veniam aut? Quisquam quibusdam nihil officia id porro, optio voluptatem quia magni saepe, sapiente harum eius corporis cupiditate, expedita explicabo. Ipsa cupiditate nulla nam ducimus eveniet, nobis, fuga voluptates sequi ut eligendi beatae optio ullam aut! A, culpa quas. Officiis laudantium eius reprehenderit similique minus accusamus veniam itaque, facere cumque adipisci quam vero, eaque possimus magni? Id minima quae nemo, corrupti nostrum eaque eveniet esse nesciunt temporibus, beatae perferendis pariatur soluta inventore, eligendi in deleniti doloribus harum quia vero iure ullam! At eveniet quaerat blanditiis tempora et doloremque!</div>

</div><!-- main wrapper end-->

    <!--botstrap cdn-->
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Прямо сейчас он открывается и становится липким при прокрутке.Но когда вы нажимаете кнопку, чтобы закрыть, она прыгает.Я бы хотел, чтобы кнопка закрылась там, где она находится ..

...