单击滚动到顶部以在 html 中显示子下拉菜单

Question

我喜欢立即访问子下拉菜单中的内容，而不使用左侧的滚动条，如图所示使用 html

这是我使用的代码

<div class="col-sm-12">
    <br/>
    <button class="collapsible">Drop Down Main</button>
        <div class="content"><p></p>
     <ul>
        <button class="collapsible">Drop Down-1</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p><b>Line 3</b></p>
        </div>
        </ul>
            
            
        <ul>
        <button class="collapsible">Drop Down-2</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p> <b>Line 3</b></p>   
        </div>
        </ul>
            
        <ul>
          <button class="collapsible">Drop Down-3</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p> <b>Line 3</b></p>       
        </div>
        </ul>
            
<ul>
        <button class="collapsible">Drop Down-4</button>
        <div class="content"><p></p>
            <p>Line1 </p>
            <p>Line 2</p>
            <p> <b>Line 3</b></p>       
            </div>
        </ul>   
    </div>
    <br/>

这是我用于下拉菜单和子下拉菜单的样式代码。

.collapsible {
  background-color: #01579b;
  color: white;
  cursor: pointer;
  padding: 18px;
   width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.active, .collapsible:hover {
  background-color: #0043b3;
}
    
.content {
  padding: 0 18px;
  max-height: 0px;
  overflow: auto;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;

}

请告诉我如何使用 html 来实现这一点。提前致谢。

Answer 1

您可以使用html作为锚标签喜欢我的导航栏：

html:

<nav class="navbar background h-nav-resp">
      <ul class=" navlist v-class-resp">
        
        <li><a href="#home">Home</a></li>
        <li><a href="#about">about</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    
      <div class="rightNav v-class-resp">
        <input type="text" name="search" id="search" />
        <button class="btn btn-sm">search</button>
      </div>

      <div class="burger">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
      </div>
    </nav>

然后我将把 ID 提供给每个地方，就像我在导航中提供的一样：

<section class="background firstSection" id="home">
      <div class="box-main">
        <div class="firsthalf">
          <p class="text-big">The future of education is here!</p>
          <p class="text-small">
            In this country of 7 Billion we need to educate each and all of them
            and we are proud to say that The future of education is here.
          </p>
          <div class="buttons">
            <button class="btn">subscribe</button>
            <button class="btn">watch video</button>
          </div>

          <div class="secondhalf">
            <img src="img/Laptop.jpg" alt="laptop image" />
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="about">
      <div class="paras">
        <p class="SectionTag text-big">The end of your search is here.</p>
        <p class="SectionSubTag text-small">
          Education is about learning skills and knowledge. It also means
          helping people to learn how to do things and support them to think
          about what they learn. It's also important for educators to teach ways
          to find and use information. Education needs research to find out how
          to make it better. It helps people become better citizens, get a
          better-paid job, shows the difference between good and bad. Education
          shows us the importance of hard work and, at the same time, helps us
          grow and develop. Thus, we are able to shape a better society to live
          in by knowing and respecting rights, laws, and regulations.
        </p>
      </div>

      <div class="thumbnail">
        <img
          src="https://source.unsplash.com/random/900×700/?Html"
          alt="laptop image"
          class="imgfluid"
        />
      </div>
    </section>
    <hr />
    <section class="section left" id="services">
      <div class="paras">
        <p class="SectionTag text-big">When coding meets children in India</p>
        <p class="SectionSubTag text-small">
          Through coding, students build essential literacy skills, gain an
          understanding of logic and sequence, and learn the mechanics of
          iteration. These tools support project-based learning and give
          students the freedom to create, collaborate, hack, remix, and tinker
          with their own unique designs.Coding classes are currently limited to
          people with a laptop, internet connection, and paying capacity.
          Further, very little content is available in the field which is
          suitable for children and apt from the Indian context.
        </p>
      </div>

      <div class="thumbnail">
        <img
          src="https://source.unsplash.com/random/900×700/?Javascript"
          alt="laptop image"
          class="imgfluid"
        />
      </div>
    </section>
    <hr />
    <section class="section">
      <div class="paras">
        <p class="SectionTag text-big">Why is programming useful?</p>
        <p class="SectionSubTag text-small">
          Programming also teaches them how software engineers use math in order
          to solve problems in a logical and creative way. This is an important
          reason that coding should be taught in schools, so children learn
          these skills while they are young.Coding, to put it simply, is using
          computer language to tell a computer what to do. The skills necessary
          for coding include being able to analyze a problem, break it down,
          engage critical thinking, and logic. This “thinking” element is often
          referred to as computational thinking.
        </p>
      </div>

      <div class="thumbnail">
        <img
          src="https://source.unsplash.com/random/900×700/?laptop"
          alt="laptop image"
          class="imgfluid"
        />
      </div>
    </section>

    <section class="contact" >
      <h1 class="text-center" id="contact">Contact Us</h1>
      <div class="form">
        <input
          class="form-input"
          type="name"
          name="name"
          id="name"
          placeholder="enter your name"
        />
        <input
          class="form-input"
          type="phone"
          name="Phone"
          id="phone"
          placeholder="enter your phone"
        />
        <input
          class="form-input"
          type="email"
          name="email"
          id="email"
          placeholder="enter your email"
        />
        <textarea class="form-input" name="text" id="text" cols="30" rows="10" maxlength="290" wrap="soft" placeholder="Elaborate your concern"></textarea>

        <button class="btn btn-dark">Submit</button>
      </div>
    </section>

    <footer class="background">
        <p class="text-footer">
            Copyright saraswati education-giving eduction online.com &copy; 2022 - All rights reserved
        </p>
        <div class="designer"><p>Designed and developed by pranjal Rai</p></div>
    </footer>

如果你点击 link 它会在那个位置滚动但是！添加这个

css:

html{
  scroll-behavior: smooth;
}

这很好！

Answer 2

我们可以使用标准的<details> HTML元素：

let details = document.querySelectorAll('details>details');

// add toggle event on all sub sections
details.forEach(d => {
  d.addEventListener("toggle", event => {
    let current = event.target;
    // close all others
    if (current.open){
      details.forEach(e => {
        if (current !== e) e.open = false;
      });
     
       current.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
     }
  });
});

body{
 padding: 1rem;
}
summary {
  background-color: rgb(46, 46, 255);
  color: white;
  padding: 0.3rem;
  cursor: pointer;
}

details>details {
  margin-left: 1rem;
}

details>details>summary {
  background-color: rgb(86, 86, 245);
}

details>details[open]>summary {
  background-color: rgb(105, 166, 245);
}

details .info {
  padding: .5rem;
  border: 1px solid gray;
}

<details>
  <summary>Drop down main</summary>
  <details>
    <summary>Drop down 1</summary>
    <div class="info">ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt.</div>
  </details>
  <details>
    <summary>Drop down 2</summary>
    <div class="info">TWO Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, illo exercitationem sequi voluptatum tempora minus rem amet magnam. Necessitatibus nihil dolores eaque sed quaerat ducimus aliquid cupiditate impedit quam laboriosam odit sequi,
      numquam fuga neque! Optio aut at, omnis quasi amet cum rem id fuga velit error cupiditate commodi neque.</div>
  </details>
  <details>
    <summary>Drop down 3</summary>
    <div class="info">THREE Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ad saepe ex obcaecati expedita nulla, nihil laborum esse excepturi natus amet non eligendi atque sint. Tenetur molestias perspiciatis libero perferendis, autem earum et eius numquam
      repellat commodi sint dignissimos veritatis eaque ratione voluptatum nam molestiae voluptatibus ipsum illum! Id dolor quos consequuntur vero cumque tenetur, quaerat quam odit non illum exercitationem voluptates! Minima, quia dolore? Accusamus libero?</div>
  </details>
  <details>
    <summary>Drop down 4</summary>
    <div class="info">FOUR Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias cupiditate nobis odio iusto, ratione laborum ipsa tempora eos porro repellat recusandae dolore quasi adipisci explicabo consequuntur omnis eveniet asperiores culpa!</div>
  </details>
</details>

我们可以使用 Element.scrollIntoView() 将元素置于视图中。使用方法参数以获得所需的结果。

单击滚动到顶部以在 html 中显示子下拉菜单

Scroll to top on click for a sub drop down menu in html

html

javascript

css

dreamweaver