jq 显示/隐藏某个模块

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input class="inp" type="text" >
    <div id="box1">
        content
    </div>
</body>
</html>

　　js部分

$(function(){
    /**
     * fn:显示/隐藏级联菜单
     */
    $(‘.inp‘).click(function(){
        if($("#box1").css("display")=="none"){
            $("#box1").show();
            }else{
            $("#box1").hide();
            }
    });
    $(document).click(function(e){
        var target = $(e.target);
        if(target.closest(".inp").length != 0) return;
        $("#box1").hide()

    })
})

原文地址：https://www.cnblogs.com/xuwupiaomiao/p/12185908.html

时间： 2024-11-04 16:21:23

jq 显示/隐藏某个模块的相关文章

js判断radiobuttonlist的选中值显示/隐藏其它模块

JQ 简单动画显示隐藏效果

一.概括 jq的显示隐藏动画总共有: 普通显示隐藏效果主要用了hide.show.toggle 淡入淡出主要用到了fadeIn.fadeOut.fadeToggle 滑动效果主要用了slideDown.slideUp.slideToggle 其中各效果用到的toggle都是其他两个属性的切换二.实例普通显示隐藏效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

jq 筛选选择器，方法，隐式迭代元素显示隐藏淡入淡出上拉下拉动画类名操作以及样式

jQuery 地址:https://jquery.com/ 历史版本:http://code.jquery.com/ 1.x:兼容 IE678 低版本浏览器 2.x:不兼容 IE678 低版本浏览器 3.x:不兼容 IE678 低版本浏览器,官方主要维护版本入口函数 // 一下两种入口函数相当于原生中的 DOMContentLoaded $(function () { /* DOM加载完成的入口*/ }) $(document).ready(function(){ /* DOM加载完成的入口

CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"> here are some test words </div> <div id="button">点击显示</div> 假设使用position:absolute和top-9999px控制点隐藏 .holi{ width: 200px; heigh

zepto源码--核心方法5（显示隐藏）--学习笔记

在不引入zepto插件模块fx_metho其他ds的情况下,zepto默认的显示隐藏的函数只有show, hide, toggle,这里解释有个前提条件,就是没有引入zepto的fx_methods插件模块 show 相比较于jQuery的show函数,这里真的很简单了,没有传入任何参数,如果在标签上以内联样式的形式存在style="display:none",直接将该内联样式的none改为空,如果不是内联样式,则通过获取计算后的样式,getComputedStyle(this, ''

利用div显示隐藏实现的分页效果

实现步骤: 1.创建对应切换div <div class="bottom_daohang"> <div class="bottom_daohang_zong"> <div class="bottom_daohang_left value_left ace"><</div> <div id="bianse1" class="bottom_daohang_num

巨丑巨简陋的一个Javascript显示隐藏菜单

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1{width:100px; height:500px; background: aqua;} li{list-style-type: none; margin-left: 0px;

jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

1.jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

CSS之选择符、链接、盒子模型、显示隐藏元素

<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素</title> <style> a:link{ color:red; } a:visited{ color:black; } a:hover{ color:blue; } a:active{ color:green; } </style> </head> <bo

jq 显示/隐藏 某个模块

jq 显示/隐藏 某个模块的相关文章

jq 显示/隐藏某个模块

jq 显示/隐藏某个模块的相关文章