`

Query之toggle事件

阅读更多

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

 

 

 

分享到:
评论

相关推荐

    query-string:处理查询字符串

    请求参数 ...composer require spatie/query-string 用法 use Spatie \ QueryString \ QueryString ; $ queryString = new QueryString ( $ uri ); 切换参数 一次切换 # / &gt; /?toggle $ queryString -&gt;

    Toggle-Nav-Dropover

    3. **响应式设计**:Toggle-Nav-Dropover需要适应不同设备的屏幕尺寸,因此会涉及到媒体查询(`@media query`),通过这些查询可以针对不同分辨率设定不同的样式规则。 4. **伪类选择器**:如`:hover`, `:active`, 和...

    query弹出层!父窗体至于不可用状态!很好的例子

    标题中的"query弹出层!父窗体至于不可用状态!很好的例子"指的是在网页设计中,使用jQuery库实现一个弹出层(通常称为模态框或对话框)的同时,将背景父窗体设置为不可交互状态。这种设计模式常用于用户需要专注...

    math-kernel-toggle:Alfred 3工作流程来切换Mathematica内核进行计算

    cd到您的workflows文件夹并执行: $ git clone git@github.com:LingyuanJi/math-kernel-toggle.git 警告 你需要有一个Mathematica 11安装到你的Mac系统,用命令行可执行文件一起/usr/local/bin/wolframscript

    jquery-migrate-1.2.1

    jQuery 版本之间有区别 比如1 9版本对于 live die toggle sub $ browser 等等都已经不支持了 在不改变你网站代码的同时 要使用 1 9 之后的版本 你需要使用 jQuery migrate(转移 过度) 所以jquery migrat 就是一个...

    jQuery 1.3 参考文档HTML 版 2009-01-19

    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...

    【JavaScript源代码】bootstrap Table的使用方法总结.docx

    Bootstrap Table 提供多种内置事件,如 `load-success`、`load-error` 等,可以绑定这些事件来执行自定义操作。同时,可以通过扩展功能,比如自定义列模板、自定义操作列等,进一步增强表格的功能。 7. **服务器端...

    仿bilibili搜索框效果,

    suggestionList.classList.toggle('hidden', !query); }); }); ``` `fetchSuggestions(query)`是一个假设的异步函数,用于根据`query`向服务器请求搜索建议。实际应用中,你可能需要使用Ajax技术(如`fetch`或`...

    PHP checkbox全选及提交到PHP

    ...为了实现全选功能,我们需要添加一个额外的复选框,通常标记为“全选”或“全选所有”,并为其绑定一个`onclick`事件来选中或取消选中所有的其他复选框。例如: ```html ...

    【JavaScript】DOM实战练习之选项卡切换

    在这个“【JavaScript】DOM实战练习之选项卡切换”的主题中,我们将深入探讨如何利用JavaScript实现一个常见的UI交互功能——选项卡切换。 选项卡切换是一种用户界面设计模式,它将大量信息组织成可切换的分块,以...

    jQuery移动端竖直分类菜单切换代码.zip

    4. **响应式设计**:使用媒体查询(`@media query`)配合`jQuery`调整不同屏幕尺寸下的样式和行为。 5. **优化性能**:通过`.stop(true, true)`防止动画队列积压,确保动画流畅。 6. **触屏支持**:可能需要处理触摸...

    jQuery-QNR入门课件.zip

    - **响应式设计**:根据屏幕尺寸或用户行为,使用`.resize()`和`.toggle()`等方法实现元素的显示和隐藏,以适应不同设备。 4. **jQuery与现代前端框架对比**: - 虽然现代前端框架如React和Vue.js提供了更强大的...

    js 自定义下拉框

    dropdownList.classList.toggle('open'); ``` 5. 添加额外的交互功能:比如,当用户选择一个下拉选项时,可以自动填充到输入框中,并关闭下拉菜单。 ```javascript dropdownList.addEventListener('click', (event...

    js在线简体繁体文字切换代码

    `query`插件,可能是指jQuery,一个广泛使用的JavaScript库,它简化了DOM操作,事件处理和动画等功能。 以下是使用jQuery和OpenCC实现简体繁体文字切换的基本步骤: 1. **引入资源**:在`index.html`文件中,你...

    微信小程序 搜索框组件代码实例

    清除图标绑定了`onToggle`事件,用于清空输入内容。取消按钮`&lt;button bind:tap="onCancel"&gt;`绑定了`onCancel`事件,当用户点击时执行取消操作。 在搜索框下方,有两个条件渲染的视图`wx:if="{{!isSearch}}"`和`wx:...

    纯jquery做的纸牌游戏源码

    此外,使用.toggle()可以轻松实现元素的显示与隐藏,使得游戏流程更加流畅。 事件处理是游戏逻辑的重要组成部分。jQuery提供了.on()方法来监听用户的点击、拖动等交互行为。在这个纸牌游戏中,可能需要监听每张牌的...

    jQuery全屏大幅下拉菜单导航代码.zip

    6. **响应式设计**:全屏菜单需要考虑到不同设备和屏幕尺寸,因此代码可能包含了媒体查询(`@media query`)和适应性布局策略,以确保在手机、平板和桌面电脑上都能正常工作。 7. **结构与样式分离**:虽然这是一个...

    Bootstrap Table使用整理(五)之分页组合查询

    Bootstrap Table 是一个流行的前端组件,用于创建美观且功能丰富的表格。在本文中,我们将深入探讨 Bootstrap Table 的分页和...通过灵活地配置各项参数和事件,开发者可以根据项目需求定制出功能强大的数据展示表格。

Global site tag (gtag.js) - Google Analytics