Question

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

我要做什么？

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

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

我为ID为“ show_button”的每个列表项添加了一个按钮，该按钮的显示最初没有设置。然后使用以下代码检查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的列表项，如果其中任何一个高度超过49px，则应显示按钮。有人可以让我知道如何解决它。谢谢。

Answer 1

getElementsByClassName返回类似数组的结构。它不会具有您要查找的属性，但是其中可能包含单个元素。尝试选择另一种方法，或者使用数组中的第一个元素，或者在此处满足您的需要。

Answer 2

在您的脚本中，尝试： document.querySelector（“。div_list”）

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

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

Answer 3

但是，您正在从事反应，为什么要使用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函数检查内容是否溢出。如果是这样，则添加一个展开按钮。

我保持简单，并内联样式以避免复杂性。显然，这可以进一步讲，原理很重要。

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

3 个答案: