Javascript 隐藏具有最大高度的内容以隐藏下拉列表_Javascript_Jquery_Css

Javascript 隐藏具有最大高度的内容以隐藏下拉列表

javascript jquery css

Javascript 隐藏具有最大高度的内容以隐藏下拉列表,javascript,jquery,css,Javascript,Jquery,Css,我试图创建一个下拉列表，我可以上下切换我的问题是，现在的内容列表总是显示，我试图让它只显示当它上升和上升。正如你所看到的，我将最大高度设置为0，然后在切换时设置为65vh，但最大高度0似乎不起作用我还尝试将“最大高度”更改为“仅使用高度”，这样可以工作，但动画不会在高度值上工作 const chooseAreaButton=document.querySelector'.ChooseArea'； $'.ChooseArea.wrapper.parent'.clickfunction{ $c

我试图创建一个下拉列表，我可以上下切换

我的问题是，现在的内容列表总是显示，我试图让它只显示当它上升和上升。正如你所看到的，我将最大高度设置为0，然后在切换时设置为65vh，但最大高度0似乎不起作用

我还尝试将“最大高度”更改为“仅使用高度”，这样可以工作，但动画不会在高度值上工作

const chooseAreaButton=document.querySelector'.ChooseArea'； $'.ChooseArea.wrapper.parent'.clickfunction{ $chooseAreaButton.toggleClass'top'，400； $'.ChooseArea.wrapper.content'.toggleClass'active'； }; .集装箱{ 高度：100vh；宽度：100vw；位置：绝对位置；证明内容：中心；对齐项目：居中；指针事件：无；显示器：flex； } .莫代尔{ 填充：5%；框大小：边框框；高度：70vh；宽度：87vw；边界半径：15px；盒影：02px4p0rgba0,0,0,0.3；显示器：flex；弯曲方向：立柱；对齐项目：居中；背景：白色；溢出：隐藏； //转换：translateX-900px； transform:translateX0；过渡：所有0.2秒缓进缓出； } .ChooseArea.top{ 排名：0； } A.ChooseArea{ 位置：绝对位置；身高：7%；利润底部：5%；指针事件：可见；宽度：70%；显示器：flex；证明内容：中心；底部：0； } .包装纸{ 显示：内联块；宽度：100%；身高：100%；位置：相对位置； } .家长{ 身高：100%；宽度：100%；显示：块；光标：指针；线高：30px；高度：30px；边框底部：1px实心$primary；颜色：000； z指数：999；位置：相对位置； -webkit过渡：边界半径0.1s线性，背景0.1s线性，z指数0s线性； -webkit转换延迟：0秒；文本对齐：左对齐；字号：18px； } .内容{ 位置：绝对位置；排名：0；显示：块； z指数：1；最大高度：0；宽度：100%；填充顶部：30px；过渡：最大高度0.4s线性； } .content.active{ z指数：3；最大高度：65vh；溢出：滚动； } .内容ul{ 背景：绿色；保证金：0；填充：0；溢出：隐藏；身高：100%；边框左下半径：5px；边框右下半径：5px；盒影：02px4p0rgba0,0,0,0.3； } .内容ul a{ 文字装饰：无； } .内容李：悬停{ 背景色：RGBA2232232231！重要； } 李先生{ 列表样式：无；文本对齐：左对齐；颜色：888；字体大小：14px；高度：8vh；左侧填充：10px；显示器：flex；弯曲方向：立柱；证明内容：中心； } .content li：类型的最后一个{ 边框左下半径：5px；边框右下半径：5px； } 选择测试

如果我正确理解您的问题，您可以通过将ChooseArea的底部更改为10px来实现。代码如下

您根本不需要使用活动类来实现这一点

const chooseAreaButton=document.querySelector'.ChooseArea'； $'.ChooseArea.wrapper.parent'.clickfunction{ $chooseAreaButton.toggleClass'top'，400； }; .集装箱{ 高度：100vh；宽度：100vw；位置：绝对位置；证明内容：中心；对齐项目：居中；指针事件：无；显示器：flex； } .莫代尔{ 填充：5%；框大小：边框框；高度：70vh；宽度：87vw；边界半径：15px；盒影：0 2px4p0 rgba0,0,0,0.3；显示器：flex；弯曲方向：立柱；对齐项目：居中；背景：白色；溢出：隐藏； //转换：translateX-900px； transform:translateX0；过渡：所有0.2秒缓进缓出； } .ChooseArea.top{ 顶部：0px； } A.ChooseArea{ 位置：绝对位置；身高：7%；利润底部：5%；指针事件：可见；宽度：70%；显示器：flex；证明内容：中心；底部：-10px； } .包装纸{ 显示：内联块；宽度：100%；身高：100%；位置：相对位置； } .家长{ 身高：100%；宽度：100%；显示：块；光标：指针；线高：30px；高度：30px；边框底部：1px实心$primary；颜色：000； z指数：999；位置：相对位置； -webkit过渡：边界半径0.1s线性，背景0.1s线性，z指数0s线性； -webkit转换延迟：0秒；文本对齐：左对齐；字号：18px； } .内容{ 位置：绝对位置；排名：0；显示：块； z指数：1；最大高度：0；宽度：100%；填充顶部：30px；过渡：最大高度0.4s线性； } .内容ul{ 背景：绿色；保证金：0；填充：0；溢出：隐藏；身高：100%；边框左下半径：5p x；边框右下半径：5px；盒影：0 2px4p0 rgba0,0,0,0.3； } .内容ul a{ 文字装饰：无； } .内容李：悬停{ 背景色：rgba223,1！重要； } 李先生{ 列表样式：无；文本对齐：左对齐；颜色：888；字体大小：14px；高度：8vh；左侧填充：10px；显示器：flex；弯曲方向：立柱；证明内容：中心； } .content li：类型的最后一个{ 边框左下半径：5px；边框右下半径：5px； } 选择测试

唯一需要添加的是溢出：hidden；，请参阅代码片段：