以固定页脚格式显示手风琴内容的按钮

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

我想在页脚中创建“按钮”。单击这些按钮将以手风琴字体样式显示内容。我生成了我认为是完美的编码，并且可以正常工作，但是，当我单击其中一个时，所有按钮都随内容向上移动。我只希望一个人向上移动，其余的保持在页脚上。另外，可能会在窗口内居中（当前其向左粘贴）

任何帮助将不胜感激。

我添加了图像以显示我想要的东西：enter image description here

现在代码在下面：

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

body {
  font-family: "Lato", sans-serif;
  margin: 0;
}

.footer {
   position:fixed;
   bottom:0px;
   margin-left: 0 auto;
   text-align: center;
   width:100%;
}

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 20%;
  padding-left:10px;
  padding-right:10px;

}

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

.accordion {
  padding: 18px;
margin-left: 10px;
margin-right: 10px;
  background-color: #eee;
  cursor: pointer;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.panel {
  text-align: left;
margin-left: 10px;
margin-right: 10px;
  width: 100%;
  background-color: #eee;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  padding-left:10px;
  padding-right:10px;
}

</style>
</head>
<body>

<h2>My footer buttons</h2>
<div class="footer">
<div class="row">
  <div class="column">

		<div class="div1">
			<button class="accordion">Button 1</button>
		<div class="panel">
		<p>Button 1 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
  <div class="column">


		<div class="div1">
			<button class="accordion">Button 2</button>
		<div class="panel">
		<p>Button 2 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
  <div class="column">

		<div class="div1">
			<button class="accordion">Button 3</button>
		<div class="panel">
		<p>Button 3 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
  <div class="column">

		<div class="div1">
			<button class="accordion">Button 4</button>
		<div class="panel">
		<p>Button 4 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
</div>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>
html css button footer
1个回答
1
投票

在.row上使用flexbox并对齐到结尾

.row {
    display: flex;
    align-items: flex-end;
    justify-content:center;
}


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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
body {
  font-family: "Lato", sans-serif;
  margin: 0;
}

.footer {
  position: fixed;
  bottom: 0px;
  margin-left: 0 auto;
  text-align: center;
  width: 100%;
}

* {
  box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

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

.row {
  display: flex;
  align-items: flex-end;
  justify-content:center;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.accordion {
  padding: 18px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #eee;
  cursor: pointer;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.panel {
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
  background-color: #eee;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  padding-left: 10px;
  padding-right: 10px;
}
<h2>My footer buttons</h2>
<div class="footer">
  <div class="row">
    <div class="column">

      <div class="div1">
        <button class="accordion">Button 1</button>
        <div class="panel">
          <p>Button 1 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
    <div class="column">


      <div class="div1">
        <button class="accordion">Button 2</button>
        <div class="panel">
          <p>Button 2 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
    <div class="column">

      <div class="div1">
        <button class="accordion">Button 3</button>
        <div class="panel">
          <p>Button 3 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
    <div class="column">

      <div class="div1">
        <button class="accordion">Button 4</button>
        <div class="panel">
          <p>Button 4 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.