单击滚动到顶部以获取 html 中的子下拉菜单

问题描述 投票：0回答：3

我喜欢立即从子下拉菜单访问内容，而不使用左侧的滚动条，如图所示，使用 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 来实现这一点。预先感谢。

javascript html css dreamweaver
3个回答
1
投票

我们可以使用标准的 

<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() 将元素带入视图。使用方法参数以获得所需的结果。

0
投票

您可以使用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>

如果您单击链接，它将滚动到该位置，但是！ 添加这个

CSS：

html{
  scroll-behavior: smooth;
}

这很好！

0
投票

甚至向元素添加一个 onclick 并返回 false

<a href="#" onclick="return false;">

这将停止将页面滚动到顶部

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.