toggle一个div显示或隐藏且可扩展成自定义下拉框

代码如下:

$(function(){
//toggle div
$("#gga").click(function(event){
event.stopPropagation(); //阻止冒泡事件
$(".toggleoption").slideToggle("fast");
});

//slideup div
$(document).click(function(event) {
var eo = $(event.target);
if($(".toggleoption").is(":visible") && eo.attr("class") != "toggleoption" && !eo.parent(".toggleoption").length) {
$('.toggleoption').slideUp("fast");
}
});
})

event.preventDefault(); //取消事件的默认动作。

赞 (0)

相关推荐

  • jquery特效 点击展示与隐藏全文

    jquery特效 点击展示与隐藏全文

    本文实例讲述了jquery点击展示与隐藏全文特效,这里使用jquery实现展开.隐藏特效,点击查看全文后内容展开,点击收起全文其内容收缩,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 一.来看一下主体框架程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击查看全文</title> <link type=&

  • jQuery焦点控制图层展示延迟隐藏的方法

    本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <b id="button"

  • jquery实现点击展开列表同时隐藏其他列表

    jquery实现点击展开列表同时隐藏其他列表

    本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • jquery控制页面的展开和隐藏实现方法(推荐)

    [jquery代码]  <script> require(["jquery","validate","bootstrap","lhgcalendar"],function($) { $(function(){ $("form").validate(); }); $(".up").click(function(){ $(this).parent().parent().paren

  • jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-

  • 右键显示(隐藏)扩展名的bat代码

    "显示/隐藏 系统文件"需右键单击任意文件夹或文件才能显示菜单 "显示/隐藏 扩展名"需右键单击任意文件夹里的空白处才能显示菜单 右键显示(隐藏)扩展名及系统文件.bat 复制代码 代码如下: @echo off reg delete "HKCR\CLSID\{00000000-0000-0000-0000-000000000012}" /f >nul 2>nul reg delete "HKLM\SOFTWARE\Clas

  • jquery点击展示与隐藏更多内容

    jquery点击展示与隐藏更多内容

    先上效果图 点击前 点击后展开 html代码 <div id="tips" class="center-block"> <h5 class="tips_head"> <u>遇到问题?</u> </h5> <div class="tips_content"> <ol> <li>Ctrl+F5刷新本页面</li> <l

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • JS点击链接后慢慢展开隐藏着图片的方法

    本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS点击链接后,慢慢展开隐藏着的图片</title> <body> <script language="JavaScript"> var b=0; var c=true; function fade(){ if(document.all); if(c == true){b+=3} i

  • 用javascript 控制表格行的展开和隐藏的代码

    无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "

随机推荐