正文

用jquery实现简单的菜单隐藏于切换(代码片段)

linbudu  linbudu  2023-03-09  334

关键词：

《锋利的JQuery》第一个demo<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <title>Document</title>
    <style>
        div.showall>a:hover
            color: rgb(235, 147, 39)
        
        .promoted
            background-color: deepskyblue;
            width: 10%;
        
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="#">Html</a></li>
            <li><a href="#">Css</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">BootStrap</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">Node.js</a></li>
            <li><a href="#">Http</a></li>
            <li><a href="#">Tcp/Ip</a></li>
            <li><a href="#">Vue</a></li>
            <li><a href="#">Github</a></li>
            <li><a href="#">Webpack</a></li>
            <li><a href="#">Json</a></li>
            <li><a href="#">OOP</a></li>
            <li><a href="#">Less</a></li>
        </ul>
        <div class="showall">
            <a href="more.html"><span>显示全部</span></a>
            <!-- 平稳退化：如果用户禁用了js 就将整个页面重载来显示完整列表 -->
        </div>
    </div>
    <script>
        var $hiddenitems = $("ul li:gt(5):not(:last)");//获取ul下索引值大于5的li元素，再去掉最后一个符合的li
        $hiddenitems.hide();
        var showbtn = $("div.showall> a");//不能用.showall div
        showbtn.click(function()
            if($hiddenitems.is(":visible"))
                $hiddenitems.hide();
                $(this).find("span").css("color","red")
                    .text("收起列表");
                $("ul li").filter(":contains(‘JQuery‘),:contains(‘Node‘)")
                    .removeClass("promoted");
        else
                $hiddenitems.show();
                $(this).find("span").css("color","deepskyblue")
                    .text("显示全部");
                $("ul li").filter(":contains(‘JQuery‘),:contains(‘Node‘)")
                .addClass("promoted");
            
            return false;
        )

        //《锋利的JQuery》中提到了使用toggle方法，我试了一下发现并不可以
　　　　　//查阅后得知jquery1.9以后toggle方法只做切换隐藏显示动画用了，toggle([speed],[easing],[fn])
　　
    </script>
</body>
</html>

jquery实现tab栏切换效果(代码片段)

jQuery实现tab栏切换效果:用jQuery做tab的效果就是点击或者鼠标悬浮在tab上时显示对应的内容，并且tab栏也会发生相应的样式变化。jQuery我用的是jquery-1.11.1.js版本。下面的代码是简单的实现：HTML代码1<!DOCTYPEhtml>2<htmllang="en">... 查看详情

用jquery实现隐藏列表表单的显示关闭切换以及ajax方式改动提交相应的那一行的改动内容。

请勿盗版，转载请加上出处http://blog.csdn.net/yanlintao1请勿盗版，转载请加上出处http://blog.csdn.net/yanlintao1先给大家看看图片效果，大家不要直接复制代码，这样是执行不了的，由于你们数据库和我的不一样，可是你们能够自己读读... 查看详情

jq简单实现切换隐藏与显示同时切换图标

HTML代码：<!doctypehtml><html><head><metacharset="utf-8"><title>jq隐藏显示图标切换</title><scripttype="text/javascript"scr="./js/jquery.min.js"></s 查看详情

easyui+ztree实现简单的树形菜单切换

使用easyui_ztree实现简单的树形菜单切换效果<!DOCTYPEhtml><html> <head> <metacharset="UTF-8">  <scripttype="text/javascript"src="../js/jquery-1.8.3.js"></s 查看详情

vue实现选项卡切换效果(代码片段)

效果如下：说明：这里我使用的原理是利用vue中的v-show/显示隐藏指令，当为true的时候显示，为false的时候隐藏1html代码：<head><metacharset="UTF-8"><basetarget="_blank"><title>vue实现选项卡切换效果</title><scriptsrc="js/... 查看详情

jquery实现简单的轮播图(代码片段)

先看效果，如果是你想要的，可以看看总体思路：1.自动轮播2.指定轮播3.左右翻动详细步骤：jQuery部分设置第一张图片显示，其他的兄弟元素隐藏自动轮播的时候，指定第一张的索引为i=0，然后i++,使其对应的i索引的图片显示，... 查看详情

用jquery怎么实现点击显示，再一次点击隐藏

1、Jquery使用内置的show和hide方法就可以实现，具体的操作步骤首先需要打开hbuilder编辑器，新建一个a标签和一段隐藏的div，设置好它们的id属性，并设置一些简单的样式：2、然后引入Jquery的库文件，编写代码。首先获取a标签的do... 查看详情

layui隐藏左侧菜单(代码片段)

简单实现//隐藏菜单varbl=$("#LAY_app_flexible").hasClass("layui-icon-shrink-right");if(bl)$("#LAY_app_flexible").click(); 查看详情

jquery动画(代码片段)

1.基本效果show([s,[e],[fn]])显示隐藏的匹配元素hide([s,[e],[fn]])隐藏显示的元素toggle([s],[e],[fn])如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的参数详解speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示... 查看详情

jquery--选择器案例实战(代码片段)

1.案例需求　　jquery最基础的选择器部分已经基本结束，来一个简单案例总结回顾下学的东西。案例需求：　　用一个按钮控制元素的显示与隐藏，页面如下，从第五个开始，不要最后一个，控制他们的显示和隐藏。2.代码... 查看详情

grpc的简单用例(golang实现)(代码片段)

这个用例的逻辑很简单,服务器运行一个管理个人信息的服务,提供如下的四个服务:(1)添加一个个人信息　　注:对应于UnaryRPCs,客户端发送单一消息给服务器,服务器返回单一消息(2)添加多个个人信息　　注:对应于ClientstreamingRPCs,客... 查看详情

怎么用javascript实现tab切换

先看一下代码实现后的最终效果：用JavaScript实现思路很简单，就是先把所有的内容隐藏，点击标题对应的内容显示，css代码如下：<styletype="text/css"> #ltab{ &nbs... 查看详情

javascript使用jquery显示/隐藏子菜单项(代码片段)

查看详情

javascriptjquery单击以显示/隐藏菜单，类似于桌面应用程序(代码片段)

查看详情

jquery实现放大镜效果(代码片段)

放大镜效果，被广泛的应用于商城的商品展示，其效果相比大家都不陌生。其原理也不是很难，那么今天就实现下放大镜效果！?主要的CSS样式：溢出隐藏overflow:hidden，隐藏图层display:none，定位position?用的主要事件：鼠标移动事... 查看详情

jquery实现点击控制div的显示和隐藏(代码片段)

我们使用点击显示、点击隐藏的时候，一般有两种可选方案.示例html<divclass="index"><h1>首页</h1><buttonid="btn">点击</button></div>最简单的方法：toggle() 点击显示h1和点击隐藏h1$(function()$("#btn").click(funct... 查看详情

jquery实现显示与隐藏效果(代码片段)

本节我们来学习如何使用jQuery中的方法来实现元素的显示与隐藏效。hide()方法hide()方法用于隐藏指定的元素，与CSS中的display:none效果类似。语法如下所示：$(selector).hide(speed,easing,callback)speed：可选，规定隐藏效果... 查看详情

easyui实现树形菜单tab功能layout布局(代码片段)

一：常见三种前端ui框架在初学者入门的状态下，我们常见的前端框架有三种且都有自己的官方网站：1.easyui：官方网站（http://www.jeasyui.net/）基于jquery的用户页面插件集合，为一些交互的js提供相应的功能，开发者也不需要写特... 查看详情