如何点击按钮显示隐藏div，再点击收起，默认隐藏

最新推荐文章于 2022-11-23 17:20:59 发布
最新推荐文章于 2022-11-23 17:20:59 发布
阅读量4k 收藏 2
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kyleCoder/article/details/77686833
本文介绍了一个简单的JavaScript函数，该函数能够实现网页中指定元素的显示与隐藏状态切换。通过修改元素的display属性来达到这一效果，适用于网页交互设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

js代码段：
function show(){

    var m3hidden=document.getElementByIdx_x_x_x_x('m3hidden');
     if(m3hidden.style.display==""||m3hidden.style.display=="block"){
         m3hidden.style.display="none";
     }else{
         m3hidden.style.display="block";
    }
 }
kyleCoder
关注
JavaScript 控制元素案例点击按钮显示隐藏 div
猿码互联
05-18 839
这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。方法获取按钮和内容的元素，并将其分别保存在。方法为按钮绑定一个点击事件的监听器。在监听器函数中，通过检查内容元素的。样式属性，如果其值为。
点击按钮（a标签）隐藏显示div内容，切换div内容
08-11
超级实用的点击隐藏，显示div内容，切换div内容 点击按钮（a标签）
点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
anda9128的博客
04-24 273
点击按钮显示隐藏DIV，点击DIV外面隐藏DIV 注意：此方法对touch事件不行，因为stopPropagation并不能阻止touchend的冒泡 <style type="text/css"> body { background-color:#999999; } ...
html div点击空白隐藏,div 点击显示隐藏
weixin_30923447的博客
06-03 388
后台管理(function($){$(window).load(function(){$("a[rel='load-content']").click(function(e){e.preventDefault();var url=$(this).attr("href");$.get(url,function(data){$(".content .mCSB_container").append(da...
点击右键和按钮进行显示隐藏div
milijiangjun的博客
11-27 561
代码如下： Document *{cursor: pointer;} #nav { width: 200px; height: 500px; background-color: red; border: 1px solid r
vue 点击展开显示更多(点击收起部分隐藏)
10-17
在Vue.js中，实现“点击展开显示更多”与“点击收起部分隐藏”的功能，可以有效地优化用户体验，尤其是在处理大量数据时。以下是如何利用Vue.js的特性实现这一功能的详细步骤： 首先，我们需要在HTML模板中创建一个...
js点击页面其它地方将某个显示的DIV隐藏
10-28
在这个场景中，如果不对显示DIV的按钮事件进行阻止冒泡处理，那么点击事件会冒泡到文档级别，进而触发我们用来隐藏DIV的全局点击事件。 以下是如何实现这个功能的详细步骤： 1. **显示和隐藏DIV**： 使用jQuery库...
toggle一个div显示或隐藏且可扩展成自定义下拉框
09-05
在网页设计和开发中，有时候我们需要为用户提供一种交互方式，比如点击某个按钮或者链接来切换一个div元素的显示状态，使其能展现为一个下拉框。这种功能在很多情况下非常实用，例如创建自定义的下拉菜单、选项列表...
【Vue小功能】默认展示3条数据，点击展开显示所有和收起显示3条数据的功能
Hemri2580的博客
10-16 2620
【Vue小功能】默认展示3条数据，点击展开显示所有和收起显示3条数据的功能
ASPnet（C#）中的DIV的显示隐藏问题
10-19
登陆时显示隐藏层，登陆后隐藏在 asp.net不常用对div隐藏，而是将对象放到panel 中，然后在button中添加事件，如双击button，在事件中加代码
点击button改变div的显示隐藏
Java Farmer
06-10 5852
看着以前自己写的这些小例子，现在看看都有点觉得好笑，是自己以前不懂还是现在已经老了？但是自己还是转存过来了，因为我喜欢。 jquery: $("input[name=add_group]").click(function() { if ($("#add_group_div").css("display") == "none") { $("#add_group_div").s
js点击隐藏和显示div
风云无忌的博客
12-24 2万+
display function hidetext() { var mychar = document.getElementById("con").style.display ="none"; } function showtext() { var mychar = document.getElementBy
点击按钮控制div隐藏和显示
weixin_41595613的博客
11-23 5090
要求：有一个按钮，点击按钮使得div消失，之后将按钮文字改变为显示，再次点击按钮使得div出现，依次类推
C#：隐藏、显示div
zcc9618的博客
03-22 2243
# HTML不可以同时使用onclick和onserverclick解决方案 # 只使用onclick和onserverclick其中一种 *********************************************************************** C#：隐藏、显示div （用onserverclick方法） //div隐藏 div.Attribute...
html 单击事件 隐藏/显示div
热门推荐
倾听博客
08-07 4万+
js代码 &lt;script type="text/javascript"&gt; function display(id){ var traget=document.getElementById(id); if(traget.style.display=="none"){ traget.style.display...
点击按钮时div显示再次点击时隐藏（白天夜间切换）
qq_40072583的博客
06-16 755
position: fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位 opacity: 0.6; 设置透明度 outline: 1000px solid rgba(0, 0, 0, 0.3); 设置轮廓大小及颜色 0.3为透明度值 z-index: 999999;将div在顶层显示 效果图： ...
点击显示/隐藏 一个div
Celestial Being
08-15 1109
add-new-block为div的class名称 $(document).ready(function(){     $(".add-new-block").hide();   $(".btn-addNewAddress").click(function(){ $(".add-new-block").show();   });   $(".add-new-cancel
html页面div的显示/隐藏
勉后之幸
04-18 7401
废话不多说，直接上代码 html页面代码 <p class="rf marginright20">点击</p> <div class="message"> <textarea id="orgAuditDesc" name="orgAuditDesc" placeholder="点击此处添加内容..."&gt...
文本框默认收起，点击展开
最新发布
03-29
<think>好的，用户想要实现文本框默认收起，点击按钮后展开的效果。我需要考虑如何用CSS和JavaScript来实现这个功能。首先，得确定用户的需求，默认是折叠状态，点击后展开。可能有两种方法：纯CSS或者结合JS。 纯CSS的话，可以利用checkbox的伪类来控制显示隐藏。比如，用一个隐藏的复选框，当被选中时，显示对应的文本框。这种方法不需要JS，但结构可能有点复杂，需要标签配合。比如，用label关联checkbox，通过:checked状态来切换显示。同时，可能需要使用max-height和过渡效果来实现动画展开。 不过用户可能希望用按钮来控制，而不仅仅是label点击。这时候可能需要JavaScript。用JS的话，可以通过按钮的点击事件来切换文本框的显示状态。例如，给文本框一个初始的class，比如.collapsed，设置display:none或者height:0，然后在点击按钮时，移除这个class，或者切换一个.active的class，控制显示。 还需要考虑过渡动画，让展开和收起有平滑的效果。CSS的transition属性可以实现这一点，但要注意，如果使用display属性，过渡可能不会生效，所以最好使用max-height或者opacity来处理。比如，初始时max-height:0，展开时设置为max-height:一个足够大的值，这样过渡就会生效。 另外，用户提到文本框默认收起，所以初始状态需要隐藏。可能需要用CSS设置初始状态，比如overflow:hidden，然后通过JS改变高度或者max-height。同时，按钮的文本可能需要切换，比如“展开”和“收起”，这需要JS来修改按钮的innerHTML。 还要考虑代码的结构，比如HTML的结构，按钮和文本框的位置关系。可能需要将按钮和文本框包裹在一个容器里，方便控制。或者直接在按钮的onclick事件中操作相邻的元素。 参考用户提供的引用，其中引用[3]提到用JS点击按钮增加文本框，可能用户对动态操作DOM比较熟悉。所以可能更倾向于JS方案。不过引用[1]中的CSS技巧，比如overflow和text-overflow，可能对控制显示隐藏有帮助，但这里需要的是整个文本框的展开收起，不仅仅是文本溢出。 综合来看，可能的解决方案是：使用CSS设置文本框的初始状态为隐藏，通过JS监听按钮点击事件，切换类名来控制显示和隐藏，并添加过渡效果。同时，按钮的文本需要相应改变。 接下来需要写具体的代码示例。HTML部分包括一个按钮和一个文本框，文本框默认是收起的。CSS部分定义.collapsed类，设置max-height为0，overflow隐藏，过渡效果。JS部分处理点击事件，切换类名，并改变按钮文字。 另外，要注意文本框的类型，可能是textarea或者div，根据实际需求。如果是多行文本输入，用textarea比较合适。如果只是显示文本，可以用div或者其他元素。 测试一下，如果初始时文本框是隐藏的，点击按钮后展开，再次点击收起，并且有平滑的过渡。同时，按钮的文字在展开和收起之间切换。这样应该满足用户的需求。 可能还需要处理初始状态，比如在页面加载时，确保文本框是收起的。通过CSS的.collapsed类来实现。JS函数中切换这个类，并检查当前状态来更新按钮文字。 这样应该就能实现用户想要的效果了。需要确保代码的正确性，比如类名的拼写，JS选择器的正确使用，以及过渡属性的兼容性。可能还需要考虑不同浏览器的支持情况，但现代浏览器应该都支持这些属性。</think>### 分步实现文本框折叠展开功能 #### 方法一：纯CSS实现（通过`<input type="checkbox">`控制） ```html <!-- HTML结构 --> <div class="expand-container"> <label for="toggle" class="toggle-btn">展开文本框</label> <input type="checkbox" id="toggle" hidden> <textarea class="text-box"></textarea> </div> <!-- CSS样式 --> <style> .text-box { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } #toggle:checked ~ .text-box { max-height: 150px; /* 根据实际内容调整 */ } .toggle-btn { cursor: pointer; color: blue; text-decoration: underline; } </style> ``` #### 方法二：JavaScript + CSS过渡动画 ```html <!-- HTML结构 --> <button onclick="toggleTextarea()" class="expand-btn">展开文本框</button> <textarea class="text-box collapsed"></textarea> <!-- CSS样式 --> <style> .text-box { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .text-box.expanded { max-height: 150px; } </style> <!-- JavaScript逻辑 --> <script> function toggleTextarea() { const textarea = document.querySelector('.text-box'); const button = document.querySelector('.expand-btn'); textarea.classList.toggle('expanded'); button.textContent = textarea.classList.contains('expanded') ? '收起文本框' : '展开文本框'; } </script> ``` #### 核心原理 1. **折叠状态**：通过`max-height: 0`和`overflow: hidden`实现初始隐藏 2. **展开动画**：利用`transition`属性实现平滑过渡 3. **状态切换**： - CSS方案：通过`:checked`伪类触发状态变化[^1] - JS方案：通过`classList.toggle()`动态切换类名[^3] 4. **按钮联动**：根据当前状态更新按钮文字描述
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值