Jquery实现菜单的收缩

前两天没什么事做,就在研究着做一个菜单的功能。现在在这里总结一下:
既然是用jquery做,肯定要导入jquery的包。做一个简单的例子,记录下自己的思路。

<script type="text/javascript">
$(document).ready(function(){//相当于body里的onload方法
$(".main > a").click(function(){ //查找页面中class=main底下的a标签
$(".store").slideToggle(); //这个方法是关键,它在api中的解释是:[color=red]通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。[/color]


changeIcon($(this));
});

});

function changeIcon(mainNode){
var img = $("#img1").attr("src");//查找页面中id=img1,并把它的src属性赋给img

if(img.indexOf("gif/plus.gif")>= 0){
$("#img1").attr("src","gif/minus.gif");
}
else{
$("#img1").attr("src","gif/plus.gif");
}

}

其中的部分html代码:

<table style="border-width: 0pt;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div class="main">
<a id="storeimg" href="#"><img src="gif/plus.gif" alt="Collapse 房间" style="border-width: 0pt;" id="img1"></a>
</div>
</td>
<td style="white-space: nowrap;">
<div class="main">
<a href="#">
AAAA
</a>
</div>
</td>
</tr>
</tbody>
</table>

<div class="store" style="display:none">
<div style="display:block;">

<table style="border-width: 0pt;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><div style="width:20px;height:1px"></div>
</td>
<td><img src="gif/WebResource_002.gif" alt=""></td>
<td style="white-space: nowrap;">
<a href="#">
11111
</a>
</td>
</tr>
</tbody>
</table>
</div>

<div style="display:block;">

<table style="border-width: 0pt;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><div style="width:20px;height:1px"></div>
</td>
<td><img src="gif/WebResource_002.gif" alt=""></td>
<td style="white-space: nowrap;">
<a href="#">
22222
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

页面代码其实并不是很重要,主要就是明白其中的思路即可,我在点击页面中的父类文字或者图标,然后把其子类文字显示出来...代码其实还是蛮简单的。呵呵。页面截图如下:
[img]http://dl.iteye.com/upload/attachment/532085/495b1c3b-ee36-3aa7-ab5c-e2da73d4124c.jpg[/img]


[img]http://dl.iteye.com/upload/attachment/532087/cad68147-13a6-30c7-9657-464f07e0f85d.jpg[/img]
jQuery实现侧边菜单栏的收缩和展开 接下来,我们需要编写JavaScript代码来实现菜单栏的收缩和展开功能。在Web开发中,经常会遇到需要实现侧边菜单栏的收缩和展开功能的需求。这是一个简单的示例,你可以根据自己的需求对菜单栏的样式和动画效果进行进一步的定制和改进。在上面的代码中,我们定义了菜单栏的样式、内容区域的样式以及一个可以点击的按钮来切换菜单栏的展开和收缩状态。首先,我们需要一个基本的HTML结构,其中包含一个侧边菜单栏和一个主要内容区域。现在,当你在浏览器中打开这个HTML文件时,你将看到一个具有收缩和展开功能的侧边菜单栏。 阅读详情

相关推荐

jQuery实现折叠下拉菜单展开收缩技巧

jQuery是一个快速、小型且功能丰富的JavaScript库,它简化了HTML文档遍历和操作、事件处理、动画以及Ajax交互。jQuery的目标是通过减少代码量、提供跨浏览器一致性以及简化复杂的任务来提高网页开发者的工作效率。它的API设计得足够简单,使得新手能够轻松上手,同时满足经验丰富的开发者深入挖掘需求。需求分析:根据用户研究确定菜单需要包含的功能和链接。草图绘制:手绘初步设计,梳理层级结构和布局。原型制作:使用工具制作交互原型,确定操作流程。用户测试。

weixin_30533301的博客 845

Jquery5——二级菜单的收缩和展开-手动轮播图

二级菜单的收缩和展开 HTML: CSS: Jquery: ​ $(function () { $(".m-treeview>li:eq(0)>span:eq(0)").click(function () { var $this = $(".m-treeview > li:eq(0)"); var imgcss = $this.attr("class"); if (imgc...

l3579的博客 718

基于jQuery弹性展开收缩菜单插件

菜单,jQuery弹性展开收缩菜单插件 jQuery弹性展开收缩菜单插件

jquery实现简单收缩菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伸缩菜单</title> <style type="text/css"> * { padding: 0; margin: 0; }...

Denghalou的博客 1513

jQuery点击展开收缩树形菜单.zip

jQuery点击展开收缩树形菜单,点击显示下拉三级菜单。

Apache Flink集成HDFS报错Failed to create checkpoint storage at checkpoint coordinator side.

在网上查询相关资料后,在flink的lib目录添加flink-shaded-hadoop-3-3.1.1.7.0.3.0-79-7.0.jar、commons-cli-1.5.0.jar两个包,但报错依旧存在,添加了export HADOOP_CLASSPATH=后面发现是hadoop与flink的兼容性问题,hadoop原先使用的是3.3.4,与多个版本的flink集成都会出现报错,最后将Hadoop的版本改成3.1.3,使用flink run运行jar包就没有这个错误了,在hdfs上成功保存了检查点。

zywenmag的博客 623

简单的jquery实现收缩列表菜单

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &

MY128的博客 1693

从 JDK8 到 JDK17:CRMEB 框架升级

【摘要】CRMEB开源框架已成功从JDK8升级至JDK17,带来显著性能提升:并发吞吐量提高35%,响应延迟降低40%,资源占用减少25%。升级方案解决87个技术卡点,支持模块化扩展和微服务转型,兼容SpringBoot3.0等新技术。提供基础版到企业级的升级服务,包含代码重构指导和性能调优。经金融级验证的方案可帮助电商平台实现日均10万+UV承载,支付成功率提升至99.7%。现以低于市场30%的价格提供全周期技术支持,助力企业抢占技术先机。

weixin_39782540的博客 699

jQuery实现导航菜单伸缩效果

效果描述:若菜单未展开点击则显示子菜单,否则将子菜单上卷收缩,同时菜单方向图标进行改变   &lt;!--left_menu star--&gt; &lt;div class="leftMenu" id="leftmenu"&gt; &lt;div class="menu_detail" id="leftmenu_0"&gt; &lt;dl&amp

Naughty_Fairy的博客 4565

路由工具之策略路由policy-based-routing、MQC三板斧流分类、流行为、流策略

PBR(Policy-Based Routing,策略路由)策略路由可理解为控制路由,因为PBR策略的优先级高于传统路由表的转发,所以它主要用于影响数据包转发的技术。

Hades_Ling的优快云博客 5579

实测对比:纳芯微NSD1624在光伏逆变器中的性能表现(含温度测试数据)

本文详细评测了纳芯微NSD1624非隔离驱动芯片在光伏逆变器中的性能表现,包括动态效率、高温稳定性及抗干扰能力。实测数据显示,该芯片在800V母线电压下效率峰值达99.03%,高温环境下结温稳定在102.7℃,且传播延迟一致性优异。与竞品相比,NSD1624在总损耗和热阻方面具有显著优势,是光伏逆变器驱动方案的理想选择。

weixin_29297127的博客 362

JQuery实现QQMenu菜单收缩滑动效果

       今天继续学习JQuery,试着做了一个QQMenu的效果。行为页面中的JQuery代码非常少,其中主要得力于JQuery中一个滑动效果slideDown()方法就实现了收缩,其它都是通过show()方法和show()的交替来实现的,我是比较喜欢用这个方法的,老师喜欢用css样式来控制相关元素的隐藏,呵呵,但终效果一样是差不多的,另外我发现JQuery中的选择的方法是非常灵活多样的,在

hikevin17的专栏 1252

【CV论文精读】【BEV感知】BEVFormer:通过时空Transformer学习多摄像机图像的鸟瞰图表示

3D视觉感知任务,包括基于多摄像头图像的3D检测和地图分割,对于自动驾驶系统至关重要。在这项工作中,我们提出了一个称为BEVFormer的新框架,它通过时空Transformer学习统一的BEV表示,以支持多个自动驾驶感知任务。简而言之,BEVFormer通过预定义的网格形状的BEV queries与空间和时间进行交互,从而利用空间和时间信息。为了聚集空间信息,我们设计了空间交叉注意力,每个BEV query从跨摄像机视图的感兴趣区域中提取空间特征。

weixin_44184852的博客 6017

html点击收缩展开菜单栏,jquery实现可点击伸缩与展开的菜单效果代码

本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下:这是一款jquery实现的点击伸缩与展开的菜单代码,操作方式大家都知道吧,点击一下展开二级菜单的内容,再次点击则合拢,很经典的折叠菜单。运行效果截图如下:在线演示地址如下:具体代码如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...

weixin_35452206的博客 2560

23.网工入门篇--------介绍一下园区网典型组网架构及案例实践

园区网典型组网架构主要分为小型、中型、大型三种类型,以下是详细介绍及相关案例实践:

qq_31450765的博客 964

ADS1293心电图模块实战:从电极贴片到信号采集的全流程指南

本文提供了一份基于TI ADS1293芯片的心电图采集系统全流程实战指南。文章深入探讨了从电极贴片选择与皮肤预处理、ADS1293前端配置(包括PGA、RLD和威尔逊网络),到PCB布局、电源去耦以及固件滤波与运动伪影处理等关键环节,旨在帮助硬件工程师和嵌入式开发者构建稳定可靠的可穿戴心电监测设备。

weixin_29201313的博客 384

jQuery 淡入淡出、展开收缩菜单实现代码

jQuery淡入淡出、展开收缩菜单。 运行以后,刷新下即可。 transitional.dtd">        jQuery淡入淡出、展开收缩菜单 - www.jbxue.com    ul li{list-style:none;}  ul li.menu{position:relative;width:120px;}  ul li.menu ul{display:n

toplover2的linux学习博客 999

Open3D 可视化(1)——简单可视化【2026最新版】

简单可视化,博客长期更新,本文最新更新时间为:2026年5月10日。

点云侠的博客 5684

jQuery插件accordion折叠菜单实现Javascript展开收缩菜单功能

网页菜单是网站最重要的一部分,经常需要设计各种各样功能的网页菜单,当前实现Javascript展开收缩菜单功能一般使用getElementById获取DIV再使用display设置显示层,相对比较复杂,使用jQuery插件accordion折叠菜单可定制多样的菜单效果,丰富网页动态元素,jQuery accordion折叠菜单效果图如下(根据项目做了css修改):http://hi.csdn.

5047

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

使用JQuery层次选择器实现树形菜单的收缩/展开特效

使用JQuery层次选择器实现树形菜单的收缩/展开特效 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jque

weixin_42152880的博客 2821

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

《JavaWeb---JQuery实现可收缩的级联菜单》

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;可收缩的菜单&lt;/title&gt; &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt; &lt;meta

网站开发初中级代码参考-转载 160

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

html点击收缩展开菜单栏,jquery实现点击向下展开菜单项(伸缩导航)效果

本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下:这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS、css和jquery部分。运行效果如下图所示:在线演示地址如下:具体代码如下:可折叠展开...

weixin_29914581的博客 2922

JQuery实现菜单的展开与收缩效果以及局部刷新

li{         list-style: none;         margin-left:16px;         display:none;     }     ul{         cursor:pointer;     }     //注册页面装载时执行的方法     $(document).ready(function(){         var

637

jQuery实现菜单的收缩效果

佳能(3040) 尼康(3040) 索尼(3040) 三星(3040) 联想(3040) 松下(3040) 希捷(3040) 惠普(3040) 华硕(3040) 其他品牌(3040) 显示全部品牌 $(function(){ var $categoryMore=$(".subCategoryBox

技术小蜗牛的爬行生活 977

Jquery菜单收缩展开

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜单收缩展开</...

qq_30843123的博客 837
上一篇: 关于select中添加option在FF与IE的兼容总结
下一篇: 一些你或许不知道的google技巧
大壹哥
博客等级 码龄16年 28粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值