首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用JAVASCRIPT而不是jQuery使div在点击按钮时可展开-可折叠到左侧?

使用JavaScript而不是jQuery来实现div在点击按钮时可展开-可折叠到左侧,可以通过以下步骤实现:

  1. HTML结构:在HTML中创建一个包含按钮和要展开-折叠的div的容器。例如:
代码语言:txt
复制
<div>
  <button id="toggleButton">展开/折叠</button>
  <div id="content">这是要展开-折叠的内容</div>
</div>
  1. CSS样式:使用CSS来设置初始状态和展开-折叠的效果。例如:
代码语言:txt
复制
#content {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transition: width 0.5s;
}

.collapsed {
  width: 0;
}
  1. JavaScript事件处理:使用JavaScript来处理按钮的点击事件,并根据当前状态切换展开-折叠效果。例如:
代码语言:txt
复制
var toggleButton = document.getElementById('toggleButton');
var content = document.getElementById('content');

toggleButton.addEventListener('click', function() {
  if (content.classList.contains('collapsed')) {
    content.classList.remove('collapsed');
  } else {
    content.classList.add('collapsed');
  }
});

在上述代码中,我们通过使用classList来添加或删除collapsed类来实现展开-折叠的效果。

这样,当点击按钮时,div将展开或折叠到左侧。

这种方法使用纯JavaScript实现了div的展开-折叠效果,而不依赖于jQuery库。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

最新jquery+easyui_api培训文档

auto fit 布尔 是否使可折叠标签自动缩放以适应父容器的大小,当为truewidth和height参数将失效。 false border 布尔 是否显示边界线。...true 1.2.2 面板参数 可折叠标签面板继承自面板(panel),许多属性定义标签里,下面的属性就是如此: 参数名称 参数类型 描述 默认值 selected 布尔 设置可折叠标签中默认展开的标签页...fn(b):当用户点击按钮后触发的回调函数,如果点击OK则给回调函数传true,如果点击cancel则传false。...描述 默认值 min 数字 文本框中允许的最小值 null max 数字 文本框中允许的最大值 null precision 数字 最高精确小数点后几位 0 7 ValidateBox...,每个按钮包含两个属性:iconCls: 显示背景图像的CSS类 handler: 当一个按钮点击的处理函数 null showPageList 布尔 定义是否显示页面列表 true showRefresh

3.2K40

探索 JQuery EasyUI:构建简单易用的前端页面

collapsible: 设置面板是否可折叠。closable: 设置面板是否关闭。border: 设置面板是否显示边框。3.2.2 使用示例<!...当用户点击提交按钮,会调用 JavaScript 函数 submitForm(),该函数中调用了 form('submit') 方法来提交表单,并且提交成功弹出一个提示框显示 "Form submitted...用户可以页面上看到用户列表,点击“Add User”按钮可以弹出添加用户的对话框,输入用户信息后点击“Save”按钮即可将用户信息保存到后端数据库中。...用户可以页面上选择不同类型的图表(柱状图、折线图、饼图),然后点击对应的按钮,页面就会加载相应类型的模拟数据并绘制图表。...用户可以页面上看到任务列表,点击工具栏按钮可以弹出添加或编辑任务的对话框,输入任务信息后点击保存按钮即可将任务信息保存到后端数据库中,同时也可以删除已有的任务。

39910

EasyUI学习笔记

collapsible boolean 定义是否显示可折叠按钮。 false minimizable boolean 定义是否显示最小化按钮。...fn大多都是以on开头的,大部分复杂组件,都可以初始化时,使用onxxx属性配置,值为事件响应 onCollapse 折叠是触发 onExpand 展开触发 小部分简单组件,还是使用JQuery...按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。...常用的属性: plain boolean 为true显示简洁效果。 iconCls string 显示在按钮文字左侧的图标(16x16)的CSS类ID <!...iconCls:"icon-add",//显示在按钮文字左侧的图标(16x16)的CSS类ID disabled:false,//为true禁用按钮

10.3K30

JQuery EasyUI window 用法

> 属性及方法说明 Window需要依存于以下的三个组件: * 拖放(Draggable) * 调整大小(Resizable) * 面板(panel) 下面来介绍Window的具体用法...false border 布尔 定义面板的边框 true doSize 布尔 当设置为true,面板载创建的时候将被调整和重新布局 true collapsible 布尔 定义是否显示可折叠定义按钮 false...null loadingMessage 字符串 当加载远程数据面板中显示的信息 Loading…                       事件 名字 参数 描述 onLoad none 当远程数据加载触发...当面板移动之后触发 left: 新的左侧位置 top: 新的顶部位置 onMaximize none 当窗口最大化的时候被触发 onRestore none 当窗口恢复原来的大小时被触发 onMinimize...move options 移动面板一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置 top: 新面板的顶部位置 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn

1.1K20

BootStrap应用开发学习入门1

导航栏移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。...768px ,通过分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用它,让标签式或胶囊式导航菜单与父元素等宽。)...注意事项: .navbar-btn 可被使用在 和 元素上, 不要在 .navbar-nav 内的 元素上使用 .navbar-btn,因为它不是标准的 button class...查看 Bootstrap 当前支持的 jQuery 版本 通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码 (首选方式),如果需要关闭请采用下列方式...> #如果您需要保持链接完整(浏览器不启用 JavaScript 时有用),请使用 data-target 属性代替 href="#": <a id

44.6K21

BootStrap应用开发学习入门1

导航栏移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。...768px ,通过分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用它,让标签式或胶囊式导航菜单与父元素等宽。)...注意事项: .navbar-btn 可被使用在 和 元素上, 不要在 .navbar-nav 内的 元素上使用 .navbar-btn,因为它不是标准的 button class...查看 Bootstrap 当前支持的 jQuery 版本 通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码 (首选方式),如果需要关闭请采用下列方式...> #如果您需要保持链接完整(浏览器不启用 JavaScript 时有用),请使用 data-target 属性代替 href="#": <a id

44.2K20

【Java框架型项目从入门装逼】第十一节 用户新增之把数据传递后台

删去了一些字段,和数据库表对应一致: 现在,我们要实现一个效果,就是当我点击新增用户的按钮,就弹出一个框来。因为我们使用的是EasyUI组件,所以我们可以用dialog组件来完成那个弹窗界面。...对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,底部有一个按钮栏。默认情况下,对话框(dialog)只有一个显示头部右侧的关闭工具。...用户可以配置对话框行为来显示其他工具(比如:可折叠 collapsible、最小化 minimizable、最大化 maximizable,等等)。...">保存 效果: 接下来,给新增按钮编写对应的点击事件: function openUserAddPage(){ $("#dlg").dialog("open"); } 这样一来...,当我们点击按钮的时候,那个对话框就会自己跳出来哦。

1.5K51

jQuery Mobile 中使用 UI 组件

通常情况下,您可以通过两种方式提供对话框,作为模式或者非模式窗口(使用 jQuery Mobile,它们显示为一个模式对话框)。...根据您添加到 navbar 的按钮数量,它将这些按钮平均分布,使它们的大小都一样。...点击,将显示完整的内容,并且 + 图标将变成一个 - 图标,表示按钮可以被再次点击以关闭完整的内容,并回到默认的按钮状态。 创建简单的列表 列表是移动网站上能看到的一个常用元素。...增强列表 您明白创建基本列表有多简单后,您可能就会想要更多选项。对列表提供更多功能的一个选项称为拆分按钮列表。拆分按钮列表使您能够同一个列表项中提供两个单击的选项。...在这种情况下,您就会有一个长列表,它看起来几乎是无法使用的,搜索筛选器栏就是处理该问题的一个很好的方式。很幸运,使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。

8K20

【Java 进阶篇】深入理解 JavaScript DOM Node 对象

本博客将深入探讨JavaScript DOM Node对象,帮助您更好地理解它的作用和如何使用。 什么是DOM Node对象 DOM中,所有的内容都是以节点的形式存在。...示例:创建一个可折叠的列表 让我们通过一个示例来演示如何使用DOM Node对象来创建一个可折叠的列表。在这个示例中,我们将创建一个HTML列表,每个列表项都可以展开或折叠显示其子列表。 <!...,我们首先创建了一个HTML列表,每个列表项包含一个展开/折叠按钮和一个子列表。...使用JavaScript,我们遍历所有列表项,为每个列表项添加点击事件监听器。当用户单击列表项,我们查找其子列表并切换其hidden类,以控制子列表的显示或隐藏。...同时,我们还切换了展开/折叠按钮的图标。 总结 JavaScript DOM Node对象是DOM操作的核心。通过了解和掌握Node对象的属性和方法,您可以更轻松地访问和操作HTML文档的内容。

20210

自实现jQuery版分页插件

本篇博客的分页插件是2017-11-10 的一篇博客的基础上改造的(原博客地址:原生js版分页插件),主要是优化了分页按钮的排列和显示样式,取消首页和末页的箭头按钮,改为数字按钮,并始终把它们分别固定放置在上一页按钮的后面和下一页按钮的前面...另外在DOM操作上,用的是jQuery,当然如果不想使用jQuery的话,也可以很容易的改成原生js。下面直接贴出代码。...|| 3; //当前页前后两边显示的页码个数(不设置,默认为3) this.ellipsis = paramsObj.ellipsis; //是否显示省略号不可点击按钮...class="no-data">未查询数据 <!...ellipsis: true //是否显示省略号按钮(不可点击)(true:显示,false:不显示,不设置,默认为显示) }

2.1K20
领券