jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover、mouseout;keyup、keydown等
1、hover函数
hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
参数:
over (Function) : 鼠标移到元素上要触发的函数。
out (Function): 鼠标移出元素要触发的函数。
<script type="text/javascript">
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();// 鼠标悬浮时触发
},function(){
$(this).next().hide();// 鼠标离开时触发
})
})
</script>
2、toggle函数
toggle(fn,fn) 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。
<script type="text/javascript">
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();// 第一次点击时触发
},function(){
$(this).next().hide();// 第二次点击时触发,之后不停的切换
})
})
</script>
toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。toggle()方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
所以上述的代码还可以写成:
<script type="text/javascript">
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
})
/*$(function(){
$("#panel h5.head").click(function(){
$(this).next().toggle();
})
})*/
</script>
还可以添加一些css样式:
<style type="text/css">
.highlight{ background:#FF3300; }
</style>
<script type="text/javascript">
$(function(){
$("#panel h5.head").toggle(function(){//配合css样式使用
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
</script>
文章来源:http://www.hxstrive.com/article/73.htm
相关推荐
请求参数 ...composer require spatie/query-string 用法 use Spatie \ QueryString \ QueryString ; $ queryString = new QueryString ( $ uri ); 切换参数 一次切换 # / > /?toggle $ queryString ->
3. **响应式设计**:Toggle-Nav-Dropover需要适应不同设备的屏幕尺寸,因此会涉及到媒体查询(`@media query`),通过这些查询可以针对不同分辨率设定不同的样式规则。 4. **伪类选择器**:如`:hover`, `:active`, 和...
标题中的"query弹出层!父窗体至于不可用状态!很好的例子"指的是在网页设计中,使用jQuery库实现一个弹出层(通常称为模态框或对话框)的同时,将背景父窗体设置为不可交互状态。这种设计模式常用于用户需要专注...
cd到您的workflows文件夹并执行: $ git clone git@github.com:LingyuanJi/math-kernel-toggle.git 警告 你需要有一个Mathematica 11安装到你的Mac系统,用命令行可执行文件一起/usr/local/bin/wolframscript
jQuery 版本之间有区别 比如1 9版本对于 live die toggle sub $ browser 等等都已经不支持了 在不改变你网站代码的同时 要使用 1 9 之后的版本 你需要使用 jQuery migrate(转移 过度) 所以jquery migrat 就是一个...
jQuery 1.3,作为一款高效、简洁的JavaScript库,自2006年发布以来,迅速成为了前端开发的首选工具之一。2009年1月19日发布的这个版本,是jQuery发展中的一个重要里程碑,它在前一版本的基础上进行了多项改进和修复...
响应式设计通常依赖于媒体查询(`media query`),以便在不同屏幕尺寸下调整布局: ```css .menu { display: none; transform: translateX(-100%); transition: transform 0.3s ease; } @media (max-width: 768px...
Bootstrap Table 提供多种内置事件,如 `load-success`、`load-error` 等,可以绑定这些事件来执行自定义操作。同时,可以通过扩展功能,比如自定义列模板、自定义操作列等,进一步增强表格的功能。 7. **服务器端...
suggestionList.classList.toggle('hidden', !query); }); }); ``` `fetchSuggestions(query)`是一个假设的异步函数,用于根据`query`向服务器请求搜索建议。实际应用中,你可能需要使用Ajax技术(如`fetch`或`...
...为了实现全选功能,我们需要添加一个额外的复选框,通常标记为“全选”或“全选所有”,并为其绑定一个`onclick`事件来选中或取消选中所有的其他复选框。例如: ```html ...
在这个“【JavaScript】DOM实战练习之选项卡切换”的主题中,我们将深入探讨如何利用JavaScript实现一个常见的UI交互功能——选项卡切换。 选项卡切换是一种用户界面设计模式,它将大量信息组织成可切换的分块,以...
4. **响应式设计**:使用媒体查询(`@media query`)配合`jQuery`调整不同屏幕尺寸下的样式和行为。 5. **优化性能**:通过`.stop(true, true)`防止动画队列积压,确保动画流畅。 6. **触屏支持**:可能需要处理触摸...
- **响应式设计**:根据屏幕尺寸或用户行为,使用`.resize()`和`.toggle()`等方法实现元素的显示和隐藏,以适应不同设备。 4. **jQuery与现代前端框架对比**: - 虽然现代前端框架如React和Vue.js提供了更强大的...
dropdownList.classList.toggle('open'); ``` 5. 添加额外的交互功能:比如,当用户选择一个下拉选项时,可以自动填充到输入框中,并关闭下拉菜单。 ```javascript dropdownList.addEventListener('click', (event...
`query`插件,可能是指jQuery,一个广泛使用的JavaScript库,它简化了DOM操作,事件处理和动画等功能。 以下是使用jQuery和OpenCC实现简体繁体文字切换的基本步骤: 1. **引入资源**:在`index.html`文件中,你...
清除图标绑定了`onToggle`事件,用于清空输入内容。取消按钮`<button bind:tap="onCancel">`绑定了`onCancel`事件,当用户点击时执行取消操作。 在搜索框下方,有两个条件渲染的视图`wx:if="{{!isSearch}}"`和`wx:...
此外,使用.toggle()可以轻松实现元素的显示与隐藏,使得游戏流程更加流畅。 事件处理是游戏逻辑的重要组成部分。jQuery提供了.on()方法来监听用户的点击、拖动等交互行为。在这个纸牌游戏中,可能需要监听每张牌的...
6. **响应式设计**:全屏菜单需要考虑到不同设备和屏幕尺寸,因此代码可能包含了媒体查询(`@media query`)和适应性布局策略,以确保在手机、平板和桌面电脑上都能正常工作。 7. **结构与样式分离**:虽然这是一个...
Bootstrap Table 是一个流行的前端组件,用于创建美观且功能丰富的表格。在本文中,我们将深入探讨 Bootstrap Table 的分页和...通过灵活地配置各项参数和事件,开发者可以根据项目需求定制出功能强大的数据展示表格。