个人中心
gpt4 book ai didi

javascript - 链接的 Accordion 主体

转载 作者：太空宇宙 更新时间：2023-11-04 07:35:30 25 4
gpt4 key购买 nike

通过单击面板打开 Accordion 的内容主体。这通常是最好的。我现在想做的是更改此行为，以便仅通过单击其中一个面板(或其他任何地方)中包含的链接来显示内容主体。希望这是有道理的。

首先:这可能吗？

这是现在的代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  width: 103%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin: -5px;
}

.bg {
 width: 100%;
}

.active,
.accordion:hover {
  background-color: #fff;
}

.panel {
  padding: 50px 0px;
  display: none;
  width: 100%;
  background-color: white;
  overflow: hidden;
  border-style: groove;
}

.accordion.active+div {
  display: block
}

.column {
    float: left;
    width: 20%;
    padding: 10px;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


    

</style>
</head>
<body>

<button class="accordion"><div class="parent">Only the following link should open the content panel: link_1</button>

<div class="panel">
<p>Content 1</p>
</div>





<button class="accordion">Only the following link should open the content panel: link_2</button>


<div class="panel">
<p>Content 2</p>
</div>

<button class="accordion">Only the following link should open the content panel: link_3</button>

<div class="panel">
  <p>Content 3</p>
</div>

<button class="accordion">Only the following link should open the content panel: link_4</button>

<div class="panel">
  <p>Content 4</p>
</div>

<script>

function scrollElmVert(el,num) { // to scroll up use a negative number
  var re=/html$/i;
  while(!re.test(el.tagName) && (1 > el.scrollTop)) el=el.parentNode;
  if(0 < el.scrollTop) el.scrollTop += num;
}

var acc = document.getElementsByClassName("accordion");
var i;
var open = null;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    if (open == this) {
      open.classList.toggle("active");
      open = null;
    } else {
      if (open != null) {
        open.classList.toggle("active");
      }
      this.classList.toggle("active");
      open = this;
      //Scroll to clicked element
      open.scrollIntoView();
      scrollElmVert(open,-68);
    }
  });
}
</script>

</body>
</html>

最佳答案

对 css 的改动很少，但总的来说它是一个 html 问题。您将需要有两个不同的元素或至少不同的类来区分打开 Accordion 的元素和不打开 Accordion 的元素

希望这就是您要找的。如果需要，很乐意解释或提供更好的解决方案。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .accordion {
      background-color: #fff;
      color: #444;
      cursor: pointer;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
      margin: -5px;
      display: inline;
    }
    
    .not-accordion {
      color: #444;
      font-size: 15px;
      display: inline-block;
    }
    
    .bg {
      width: 100%;
    }
    
    .active,
    .accordion:hover {
      background-color: #fff;
    }
    
    .panel {
      padding: 50px 0px;
      display: none;
      width: 100%;
      background-color: white;
      overflow: hidden;
      border-style: groove;
    }
    
    .accordion.active+div {
      display: block
    }
    
    .column {
      float: left;
      width: 20%;
      padding: 10px;
    }
    /* Clear floats after the columns */
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>

<body>

  <div class="parent">

    <p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_1</button>

    <div class="panel">
      <p>Content 1</p>
    </div>




    <p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_2</button>


    <div class="panel">
      <p>Content 2</p>
    </div>
    <p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_3</button>

    <div class="panel">
      <p>Content 3</p>
    </div>

    <p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_4</button>
    <div class="panel">
      <p>Content 4</p>
    </div>

    <script>
      function scrollElmVert(el, num) { // to scroll up use a negative number
        var re = /html$/i;
        while (!re.test(el.tagName) && (1 > el.scrollTop)) el = el.parentNode;
        if (0 < el.scrollTop) el.scrollTop += num;
      }

      var acc = document.getElementsByClassName("accordion");
      var i;
      var open = null;

      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          if (open == this) {
            open.classList.toggle("active");
            open = null;
          } else {
            if (open != null) {
              open.classList.toggle("active");
            }
            this.classList.toggle("active");
            open = this;
            //Scroll to clicked element
            open.scrollIntoView();
            scrollElmVert(open, -68);
          }
        });
      }
    </script>

</body>

</html>

关于javascript - 链接的 Accordion 主体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48993676/

25 4 0
文章推荐： java - 使用 getResource() 无法使图像正常工作
文章推荐： C 编程 - getopt
文章推荐： python - Django 从原始查询创建管理列表
文章推荐： c - 调试时watch的value栏中的0x0022f844代表什么？
太空宇宙
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com