css 如何在向上的方向上改变元素的高度，并使上面的邻居做出相应的React？

u3r8eeie 于 2023-04-08 发布在 React

关注(0)|答案(1)|浏览(157)

这里有一个可折叠部分的列表。当一个部分打开时，它需要向上移动（改变高度），这样它上面的元素会移动，而下面的元素不会移动。注意，上面的元素溢出是可以接受的。
不能使用absolute，因为它不会将元素推到它上面。还要注意，打开时部分内容的高度是动态的，并且是未知的。
默认情况下，当一个部分的内容被设置为关闭时不显示，打开时不显示，但它会移动它下面的部分。
有没有其他方法可以改变方向？
尝试在显示要打开的部分的内容时将位置设置为absolute，但这不是一个解决方案。
下面的代码片段仅供参考。真实的的应用程序是在react中，但功能是相同的。

打开中间部分应移动第一部分，而不是最后一部分

const allCollapsibleSections = document.querySelectorAll('[data-js="collapsible-section"]')
const setIsOpenFunctions = [];
allCollapsibleSections.forEach((collapsibleSection, index) => {
  const openCloseButton = collapsibleSection.querySelector('button');
  const section = collapsibleSection.querySelector('section');
  let open = section.getAttribute('open') || false;
  
  const renderSection = ()=>{
    if(open){
      section.style.display = 'unset';
      return;
    }
    section.style.display = 'none';
  }
  const toggleIsOpen = () => {
    open = !open;
    renderSection();
  }
  
  renderSection();
  
  setIsOpenFunctions[index] = toggleIsOpen;
  openCloseButton.addEventListener('click', ()=>{
    setIsOpenFunctions[index]();
  });
})

<div>
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
  
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
  
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75902959/how-to-change-the-height-of-an-element-in-the-up-direction-and-have-above-neighb

1条答案

按热度按时间

42fyovps1#

看起来这是一个XY问题，尝试的解决方案并不是问题的唯一解决方案。
所以一个解决方案是，而不是旨在移动上面的元素，父元素应该有一个最大高度，并可滚动，当一个部分被打开，只是滚动到该部分。

const allCollapsibleSections = document.querySelectorAll('[data-js="collapsible-section"]')
const setIsOpenFunctions = [];
allCollapsibleSections.forEach((collapsibleSection, index) => {
  const openCloseButton = collapsibleSection.querySelector('button');
  const section = collapsibleSection.querySelector('section');
  let open = section.getAttribute('open') || false;
  
  const renderSection = ()=>{
    if(open){
      section.style.display = 'unset';
      section.scrollIntoView({
        behavior: "smooth",
        block: "end",
        inline: "nearest",
      });
      return;
    }
    section.style.display = 'none';
  }
  const toggleIsOpen = () => {
    open = !open;
    renderSection();
  }
  
  renderSection();
  
  setIsOpenFunctions[index] = toggleIsOpen;
  openCloseButton.addEventListener('click', ()=>{
    setIsOpenFunctions[index]();
  });
})

<div style="max-height: 80px; overflow-y: scroll;">
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
  
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
  
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
  
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
  
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
  
  <div style="display: flex; flex-direction: row;"  data-js="collapsible-section">
    <button>Open/Close</button>
    <section style="background: yellow; height: 50px">
      This is a section
    </section>
  </div>
</div>

展开查看全部

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何在向上的方向上改变元素的高度，并使上面的邻居做出相应的React？

1条答案

相关问题

热门标签

最新问答