`
hongdou1120
  • 浏览: 2221 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

toggle()函数的应用

 
阅读更多

toggle()函数的应用。

以下两种方法显示的效果是一样的:

 

  function addItem0() {
            $('#btn_show').toggle(function(){
                $('#show_box').show();
                $(this).html('点击收缩');
                },function(){
                $('#show_box').hide();
                $(this).html('点击弹开');                   
                })
           };

 

 


<div class="box">
<a href="#" id="btn_show" style=" display: block;">点击弹开</a>
<div id="show_box" style="display: none;">show_boxshow_boxshow_boxshow_boxshow_box</div>

 

 

 

 $(function(){ 
    $('#bn').toggle(function(){ 
         $(this).next('div.content').toggle(); 
     },function(){ 
         $(this).next('div.content').toggle(); 
     }); 
   })

 

 


<div id="bn">ddff</div>
<div class="content">contentcontentcontentcontentcontentcontent</div>

分享到:
评论

相关推荐

    jquery中toggle函数交替使用问题

    然而在使用过程中,有时会出现一些问题,比如今天我们要探讨的toggle函数交替使用问题。 首先,我们需要了解的是,toggle()函数并不是用来处理元素在多种状态之间切换的。它只是简单地在一个元素上反复应用show()和...

    S7-200SMART_库文件_翻转输出状态_toggle_单按钮启停功能.rar

    本资源“S7-200SMART_库文件_翻转输出状态_toggle_单按钮启停功能.rar”提供了一种巧妙的方法,通过库指令实现了一个简单的单按钮启停控制逻辑,这对于许多工业应用来说非常实用。 首先,我们需要了解S7-200SMART ...

    LEDTOGGLE_ledtoggle_

    STM32F411 Nucleo是一款基于ARM Cortex-M4内核的微控制器开发板,广泛应用于嵌入式系统设计。"LED TOGGLE"通常是指通过编程控制LED灯的状态,在这里可能是通过反复切换LED的亮灭来实现闪烁效果。 在描述中提到,...

    bootstrap-toggle-buttons

    3. **初始化插件**:在文档加载完成后,通过jQuery的`$(document).ready()`函数初始化Toggle Buttons插件。 ```javascript $(function() { $('.toggle').bootstrapToggle(); }); ``` ### 自定义样式和选项 ...

    toggle的使用

    `toggle()`函数是jQuery的核心方法之一,它的基本用法有两种:一种是无参数的,另一种是接受两个函数作为参数。我们先来看看无参数`toggle()`的用法。 无参数的`toggle()`用于切换元素的可见性。如果元素当前是隐藏...

    MATLAB GUI视频Toggle Button的基本用法.rar

    MATLAB GUI(图形用户界面)是MATLAB编程环境中用于创建交互式应用程序的一种工具。这个教程主要聚焦于三种常用的GUI控件:Radio Button、Check Box和Toggle Button,它们都是用户界面设计中的重要元素,用于接收...

    gpio_toggle_GPIO_

    3. 循环或延时:如果需要翻转,可以使用循环或延时函数控制翻转速率,比如控制LED闪烁的频率。 4. 处理中断:如果配置了中断,当GPIO状态变化时,需要编写中断服务程序来响应。 在实际应用中,TI提供了丰富的开发...

    【JavaScript源代码】jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能.docx

    ### 使用jQuery中的`hide()`、`toggle()`函数实现相机品牌展示隐藏功能 #### 一、概述 在Web开发中,动态地控制元素的显示与隐藏是常见需求之一。通过使用jQuery库提供的`hide()`和`toggle()`等方法,开发者能够...

    快思聪函数中文说明

    ### 快思聪函数中文说明 #### 模拟运算(Analog Operations) ##### 二进制偏移转换器(Analog2's Offset Converter) 该函数用于执行模拟信号的二进制偏移转换,通过给定的偏移量来调整输入信号的值。此功能对于...

    收展式二级菜单toggleMenu

    五、实际应用与调试 在实际项目中,可能需要根据具体需求调整菜单的布局和交互细节。通过给定的参考示例(http://www.jq22.com/jquery-info6171),可以学习和借鉴其实现方式,并在本地环境中进行调试和定制,以...

    单片机课程设计——内部函数intrins.h应用举例.zip

    1. **位操作函数**:如`bit_set()`、`bit_clear()`和`bit_toggle()`,它们可以直接对单片机的寄存器或存储器中的位进行设置、清除或翻转操作,这在处理中断标志位、控制寄存器等时非常方便。 2. **定时器操作**:如...

    Dave函数功能解析

    在本文中,我们将详细解析Dave函数库中的各个功能,帮助新手快速理解和应用。 1. Initialization Function(初始化函数): Dave函数库的初始化功能由`IO_vInit`函数实现。这个函数负责设置和配置I/O端口,确保...

    jQuery 淡入/淡出效果函数用法分析

    在jQuery库中,淡入/淡出效果是创建动态用户界面和吸引用户注意力的重要手段。本文将详细解析jQuery中四个核心的淡入/淡出效果...熟练掌握jQuery的淡入/淡出效果函数,能够帮助你构建更具吸引力和互动性的网页应用。

    精选_【Cocos Creator实战教程(9)】——UI组件(3)Toggle 组件_源码打包

    本教程将深入讲解Toggle组件的使用,帮助开发者更好地理解和应用这一功能。 Toggle组件,又称为切换按钮或开关,通常用于提供两种状态之间的切换,如开/关、是/否等。它由两部分组成:一个背景和一个滑块,滑块可以...

    JQuery入门——事件切换之toggle()方法应用介绍

    1、在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,…]),其中fn、fn2、fn3、fn4等函数依次调用。 2、示例代码: 代码如下:&...

    react-native-toggle-switch:用于 React Native 应用程序的可定制开关组件

    "react-native-toggle-switch"是一个专门为React Native应用设计的可定制开关组件,它允许开发者轻松地在应用程序中添加开/关功能,同时可以根据项目需求进行样式调整。 1. **React Native基础**: React Native是...

    STM32CubeMX+HAL库中断函数应该写在哪里

    ### STM32CubeMX与HAL库中断函数的编写与配置 #### 一、STM32CubeMX工程创建及配置 1. **STM32CubeMX介绍**:STM32CubeMX是一款由ST官方提供的图形化配置工具,用于帮助开发者快速配置STM32微控制器的相关设置。...

    jQuery toggle事件制作FAQ列表页.zip

    1. **jQuery toggle事件**:toggle事件是jQuery中的一个方法,它允许我们将两个或多个函数绑定到元素上。当用户点击该元素时,这些函数会交替执行。在FAQ列表页中,toggle事件用于控制列表项的展开和收缩,使得用户...

    jquery toggle()方法制作右侧浮动的qq在线客服代码

    `toggle()`接收两个可选参数,一个是显示和隐藏的切换速度(例如毫秒数),另一个是回调函数。当元素被显示或隐藏时,这个回调函数会被执行。基础的`toggle()`调用可以这样写: ```javascript $("#elementId")....

Global site tag (gtag.js) - Google Analytics