时间戳

首页 > 解决方案 > 按钮定位问题

javascript - 按钮定位问题

问题描述

我有以下代码：

document.addEventListener("DOMContentLoaded", function(event) {
  // Select all the read more buttons and hidden contents
  const readMoreButtons = document.querySelectorAll(".read-more");
  const hiddenContents = document.querySelectorAll(".hidden");
  // Now loop over the read more buttons 
  readMoreButtons.forEach((readMoreButton, index) => {
    // Add onclick event listeners to all of them
    readMoreButton.addEventListener("click", () => {
      // Change content of read more button to read less based on the textContent
      if (readMoreButton.textContent === "Read More") {
        readMoreButton.textContent = "Read Less";
      } else {
        readMoreButton.textContent = "Read More";
      }
      // Toggle class based on index
      hiddenContents[index].classList.toggle("hidden");
      readMoreButton.closest(".snip1311").classList.toggle("reading");
    })
  })
})
/* Projects */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white;
}
figure.snip1311.reading {
  overflow-y: auto;
}

figure.snip1311 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow-y: hidden;
  overflow-x: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 360px;
  max-height: 256px;
  width: 500rem;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
  border: 5px solid #555;
}
figure.snip1311 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1311 img {
  max-width: 110%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
  height: 258px;
}
@media all and (max-width: 500px) {
figure.snip1311 img {
  border: none;
  }
}
figure.snip1311 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
  line-height: 1.5em;
}
figure.snip1311 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure.snip1311 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
figure.snip1311 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1311 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1311 .read-more1 {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1311 .read-more1:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}
<figure class="snip1311"><img src="https://www.thespruce.com/thmb/tClzdZVdo_baMV7YA_9HjggPk9k=/4169x2778/filters:fill(auto,1)/the-difference-between-trees-and-shrubs-3269804-hero-a4000090f0714f59a8ec6201ad250d90.jpg" alt="sample98"/>
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed orci interdum, eleifend nisl suscipit, ornare urna. Curabitur vel maximus lacus. In ut mauris convallis, pellentesque tortor sed, aliquet magna.</p>
    <div class="read-more">Read More</div>
    <br>
    <p class="hidden"><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed orci interdum, eleifend nisl suscipit, ornare urna. Curabitur vel maximus lacus. In ut mauris convallis, pellentesque tortor sed, aliquet magna. Nam maximus odio eget semper laoreet. In ut vehicula tortor. Suspendisse iaculis, erat eget ultricies iaculis, metus ex cursus libero, sed porttitor justo turpis sit amet lectus. Maecenas mattis tempus orci, vel bibendum erat convallis a.Nam ultrices sapien vel nisl maximus, pretium porta nisl bibendum. Nullam ut arcu id est tristique mollis quis id diam. Proin accumsan pellentesque felis. Integer sollicitudin orci congue enim mollis, elementum auctor eros imperdiet. Etiam et fermentum tellus, a pharetra purus. Integer fringilla urna vel lorem finibus commodo. Mauris interdum justo sed nibh efficitur tincidunt.Donec lectus arcu, vulputate ac egestas sed, feugiat vitae ex. Vestibulum eget tristique nulla. Aliquam et tellus rutrum nulla elementum ultrices. Etiam dapibus fringilla magna ac eleifend. Cras turpis nibh, accumsan ut quam non, laoreet porttitor sapien. Etiam consequat turpis lobortis finibus tempus. Suspendisse rhoncus tincidunt bibendum. Donec sagittis, felis non elementum dapibus, justo mauris luctus libero, a ultricies tortor mi et risus. Fusce aliquet, lacus id tincidunt vestibulum, turpis augue porta tellus, eget porta ante erat ut sem. Integer eu mi turpis. Proin bibendum pellentesque massa, sit amet sodales dui mollis et. Curabitur malesuada elit nisi, nec congue tellus congue id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse imperdiet, sem ut rutrum condimentum, justo lacus lobortis nisl, id mollis nisl ipsum sit amet nunc. Sed et ex leo.</p>
  </figcaption>
</figure>

运行上面的代码可以看到，当你点击read more按钮的时候，按钮突然消失了。这是因为文本很长，所以按钮在顶部消失了。无论文本有多长，我将如何使read-more按钮始终位于顶部。

预期产出

在此处输入图像描述

我希望read more按钮与卡片顶部的边距相同。否则，其他任何东西都不应该改变，比如按钮的对齐方式根本不应该改变。只是按钮应该与margin-top预期输出中显示的相同，无论文本有多长。关于如何做到这一点的任何建议？

标签： javascripthtmljquerycss

解决方案

您的元素正在从中心翻转，并且溢出到可滚动元素的顶部，根据元素中的内容，当不再隐藏时，将文本从中心放置在中间的某个位置。

编辑：您的 CSS 中有两个实例，translate(0%, -50%)第二个用于 Y 轴，这是将您的元素内容提升 50% 的元素，并造成顶部不可见的问题。

通过首先向元素添加一个类shown来获取翻转元素的 clientHeight ，一旦hidden被删除。然后设置一个超时以10确保在获取添加的类shown/s clientHeight 之前设置了 DOM。然后将客户端一半除以 2 并减去父元素高度的一半以定位内容的顶部，不排除填充。

现在使用这个单元并使用根元素 => 通过变量将其传递给您的 CSS document.documentElement.style.setProperty('--distTrans', 'distance')。这将在 CSS 中设置一个变量到我们想要设置翻转内容顶部的距离。然后在 CSS 中，将shown选择器转换属性设置为translateY(var(--distTrans))，这会将文本向下滑动到内容的顶部，不包括填充。

function showLess(e) {
  document.querySelectorAll('.showBtn').forEach(btn => {
    if (e.target === btn) {
      btn.closest(".snip1311").classList.toggle("reading");
      btn.parentNode.classList.toggle('shown')
      btn.parentNode.classList.toggle('hidden')
    }
  })
}

function parseContent(event) {
  // Select all the read more buttons and hidden contents
  const readMoreButtons = document.querySelectorAll(".read-more");
  const hiddenContents = document.querySelectorAll(".hidden");
  // Now loop over the read more buttons 
  readMoreButtons.forEach((readMoreButton, index) => {
    // Add onclick event listeners to all of them
    readMoreButton.addEventListener("click", function(e) {
      setTimeout(() => {
        // this calculates the height of your shown elements contentby 2
        // and then subtracts the half of the height of the parent element
        document.documentElement.style.setProperty('--transDist', document.querySelector('.shown').clientHeight / 2 - document.querySelector('.snip1311').clientHeight / 2 + 'px');
      }, 10);
      // Toggle class based on index
      hiddenContents[index].classList.toggle("hidden");
      hiddenContents[index].classList.toggle("shown");
      
      let shown = document.querySelectorAll('.shown')
      if (shown) {
        shown.forEach(item => {
          item.addEventListener('click', showLess)
        })
      }
      readMoreButton.closest(".snip1311").classList.toggle("reading");
    })
  })
}

document.addEventListener("DOMContentLoaded", parseContent)
/* Projects */

:root {
  --transDist: 100px;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: white;
}

figure.snip1311.reading {
  overflow-y: auto;
}

figure.snip1311 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow-y: hidden;
  overflow-x: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 360px;
  max-height: 256px;
  width: 500rem;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
  border: 5px solid #555;
}

figure.snip1311 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

figure.snip1311 img {
  max-width: 110%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
  height: 258px;
}

@media all and (max-width: 500px) {
  figure.snip1311 img {
    border: none;
  }
}

figure.snip1311 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}

figure.snip1311 h3,
figure.snip1311 p {
  line-height: 1.5em;
}

figure.snip1311 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}

figure.snip1311 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}

figure.snip1311 .read-more {
  border: 2px solid #ffffff;
  background: #000000;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  outline: none;
  display: inline-block;
  cursor: pointer;
}

figure.snip1311 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
  outline: none;
}

figure.snip1311:hover img,
figure.snip1311.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}

figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

figure.snip1311 .hidden {
  display: none;
}

figure.snip1311 .shown {
  transform: translateY(var(--transDist));
  padding-bottom: .3rem;
}

.showBtn {
  background-color: black;
  color: white;
  outline: none;
  border: 2px solid white;
  margin-bottom: 1rem;
  display: block;
  cursor: pointer;
  line-height: 1.8rem;
  margin-top: -4rem;
}

.showBtn:nth-of-type(2){
  margin-top: .5rem;
}

.showBtn:hover {
  background-color: white;
  color: black;
  outline: none;
}

.shown-title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}
<figure class="snip1311"><img src="https://www.thespruce.com/thmb/tClzdZVdo_baMV7YA_9HjggPk9k=/4169x2778/filters:fill(auto,1)/the-difference-between-trees-and-shrubs-3269804-hero-a4000090f0714f59a8ec6201ad250d90.jpg" alt="sample98" />
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed orci interdum, eleifend nisl suscipit, ornare urna. Curabitur vel maximus lacus. In ut mauris convallis, pellentesque tortor sed, aliquet magna.</p>
    <button class="read-more">Read More</button>
    <br>
    <p class="hidden">
      <button class="showBtn">Read Less</button>
      <b class="shown-title">Lorem ipsum</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed orci interdum, eleifend nisl suscipit, ornare urna. Curabitur vel maximus lacus. In ut mauris convallis, pellentesque tortor sed, aliquet magna.
      Nam maximus odio eget semper laoreet. In ut vehicula tortor. Suspendisse iaculis, erat eget ultricies iaculis, metus ex cursus libero, sed porttitor justo turpis sit amet lectus. Maecenas mattis tempus orci, vel bibendum erat convallis a.Nam ultrices
      sapien vel nisl maximus, pretium porta nisl bibendum. Nullam ut arcu id est tristique mollis quis id diam. Proin accumsan pellentesque felis. Integer sollicitudin orci congue enim mollis, elementum auctor eros imperdiet. Etiam et fermentum tellus,
      a pharetra purus. Integer fringilla urna vel lorem finibus commodo. Mauris interdum justo sed nibh efficitur tincidunt.Donec lectus arcu, vulputate ac egestas sed, feugiat vitae ex. Vestibulum eget tristique nulla. Aliquam et tellus rutrum nulla
      elementum ultrices. Etiam dapibus fringilla magna ac eleifend. Cras turpis nibh, accumsan ut quam non, laoreet porttitor sapien. Etiam consequat turpis lobortis finibus tempus. Suspendisse rhoncus tincidunt bibendum. Donec sagittis, felis non elementum
      dapibus, justo mauris luctus libero, a ultricies tortor mi et risus. Fusce aliquet, lacus id tincidunt vestibulum, turpis augue porta tellus, eget porta ante erat ut sem. Integer eu mi turpis. Proin bibendum pellentesque massa, sit amet sodales
      dui mollis et. Curabitur malesuada elit nisi, nec congue tellus congue id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse imperdiet, sem ut rutrum condimentum, justo lacus lobortis nisl, id mollis
      nisl ipsum sit amet nunc. Sed et ex leo.
      
      <button class="showBtn">Read Less</button>
    </p>
  </figcaption>
</figure>

推荐阅读