仅当 div 的宽度超过特定高度 javascript 时如何显示按钮？

Question

我只想在 div 的高度超过特定高度时显示按钮。单击此按钮时，它应该显示 div 的全部内容。

我想做什么？

我有一个包含列表项的侧面板（这是一个包含 svg、span 和 time 元素的 div）现在当这个 div 的高度超过 max-height (49px) 它应该显示一个按钮并单击这个按钮应该显示 div 的全部内容...

到目前为止我尝试了什么？ 我已将列表项中 div 的最大高度设置为 49px 并溢出到隐藏。

我为每个 ID 为“show_button”的列表项添加了一个按钮，该按钮的显示最初设置为无。 andi 使用下面的代码检查 div 的高度是否超过了最大限制。

if (document.getElementsByClassName('div_list').offsetHeight < 
    document.getElementsByClassName('div_list').scrollHeight) {
        document.getElementById('show_button').style.display = 'inline';}
}

但这不起作用...当我记录 div_list 的 offsetheight 和 scrollheight 时，我得到未定义。

下面是代码，

<li>
   <div className="div_list">
       <div className="details">
           <Svg/>
           <span>some text exceeding div height some text exceeding div 
               height some text exceeding div height some text exceeding div 
               height some text exceeding div height
           </span>
       </div>
       <time>{time_var}</time>
   </div>
   <button id="show_button" onClick={this.handle_show_btn}><SvgAccUp/> 
   </button>

handle_show_btn = () => {
    document.getElementsByClassName('div_list').style.overflow = 'visible';
};

render = () => {
    if (document.getElementsByClassName('div_list').offsetHeight < 
        document.getElementsByClassName('div_list').scrollHeight) {
            document.getElementById('show_button').style.display = 'inline';
    }}

css代码，

.div_list {
    max-height: 49px;
    overflow: hidden;
 }

 #show_button {
     display: none;
 }

会有多个带有 div 类名 div_list 的列表项，如果其中任何一个高度超过 49 像素，则应显示按钮。有人可以让我知道如何解决它。谢谢。

Answer 1

getElementsByClassName 返回一个类似数组的结构。它不会具有您正在寻找的属性，但其中的单个元素可能。尝试选择其他方式，或使用数组中的第一个元素，或任何适合您需要的方式。

Answer 2

在您的脚本中，尝试： document.querySelector(“.div_list”)

在您的 html 中，尝试： div class="div_list"

假设这是该类的唯一元素。否则设置一个 id 并在脚本中将其引用为“#div_list”

Answer 3

但是，你在做 react，为什么要使用 js/jQuery 方法呢？ React 为您提供了更简单的方法来获得它。

见小example I made。解决方案的核心是简单的Expandable 组件：

const Expandable = ({baseHeight, children, style}) => {
  const [expanded, setExpanded] = useState(false);
  const [overflow, setOverflow] = useState(false);
  return (
    <div style={{...style, position: 'relative', overflow: 'hidden', height: (expanded ? null : baseHeight)}}
        ref={v => v && setOverflow(v.offsetHeight < v.scrollHeight)}
    >
      {children}
      {overflow && <button onClick={() => setExpanded(true)} style={{position: 'absolute', bottom: 0}}>expand</button>}
    </div>
  );
};

您所做的是将您的内容放入一个容器中，并使用ref 函数检查它是否溢出。如果是，则添加一个展开按钮。

我保持简单并内联样式以避免复杂性。显然，这可以更进一步，原则才是最重要的。