Web Front-end
JS Tutorial
jQuery implements folding and expanding menu group effect code_jquery
jQuery implements folding and expanding menu group effect code_jquery
The example in this article describes the jQuery code to implement folding and expanding menu group effects. Share it with everyone for your reference. The details are as follows:
This is a beautiful vertical folding menu group implemented by jQuery. Please refresh the page when running it for the first time and let jQ load. This menu is widely used and can be used on the left side of the background and the front desk of the website. Found it on Tencent Weibo open platform, share it with everyone to study together. Tip: If there are errors, please refresh the page.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/
The specific code is as follows:
<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个展开合拢的菜单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin:0; padding:0; }
ul,li { list-style:none; }
.catalog { width:164px; margin:0 auto;}
.t1 { height:4px; background:url(images/bg_catalog.gif) left top no-repeat; }
.t2 { background:url(images/bg_catalog.gif) -164px top repeat-y; }
.t3 { height:4px; background:url(images/bg_catalog.gif) left bottom no-repeat; }
.t2 h2 { height:81px; background:url(images/bg_catalog_logo.gif) center no-repeat; text-indent:-9999px; }
.t2 h3 { heigth:36px; line-height:36px; margin:0 1px; text-indent:26px; background:url(images/bg_catalog_icon.gif) no-repeat 13px 14px; font-size:14px; border-top:1px solid #fFF; }
.t2 ul { padding:10px 0; font-size:12px; }
.t2 li { text-indent:27px; height:30px; line-height:30px; }
.selected { display:block;}
.unselected {display:none;}
</style>
</head>
<body>
<div class="re_left">
<div class="catalog">
<div class="t1"></div>
<div class="t2">
<h2>资源</h2>
<h3><a href="javascript:void(0);" src="#">平台使用说明</a></h3>
<ul class="unselected">
<li><a href="#">平台介绍</a></li>
<li><a href="#">应用开发说明</a></li>
<li><a href="#">应用审核流程</a></li>
<li style="display:none;"><a href="#">成功案例</a></li>
<li><a href="#">开发者协议</a></li>
</ul>
<h3><a href="javascript:void(0);" src="#">API说明</a></h3>
<ul class="unselected">
<li><a href="#">API文档</a></li>
<li><a href="#">Oauth授权说明</a></li>
<li><a href="#">API调用权限</a></li>
</ul>
<h3><a href="javascript:void(0);" src="#">SDK及资源下载</a></h3>
<ul class="unselected">
<li><a href="#">SDK下载</a></li>
<li><a href="#">视觉素材下载</a></li>
</ul>
<h3><a href="javascript:void(0);" src="#">帮助中心</a></h3>
<ul class="unselected">
<li><a href="#">常见问题解答</a></li>
<li><a href="#">返回错误码说明</a></li>
</ul>
</div>
<div class="t3"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var catalogIndex=[0,0];
if (catalogIndex[0]==2){catalogIndex[0]=3;}
else if(catalogIndex[0]==3){catalogIndex[0]=2;}
if(catalogIndex.length==0){catalogIndex=[0,0];}
$(".re_left .catalog h3 a").each(function(){
$(this).attr("src",$(this).attr("href"));
});
$(".re_left .catalog").find("ul").css("border-bottom",0).end().find("h3:eq("+catalogIndex[0]+")").addClass("open").find("a").attr("href","javascript:void(0);").end().next().css("display","block").find("li:eq("+(catalogIndex[1]-1==-1?9999:catalogIndex[1]-1)+")").addClass("active");$(".re_left .catalog").find("h3").last().css("border-bottom-width","0");});
$(".re_left .catalog").find("h3").bind("click",function(){
if ($(this).hasClass("open"))
{
if ($(this).next().find(".active").size()==0)
{
$(this).next().slideUp(500,function(){
$(this).prev().removeClass("open");
});
}
else
{
$(this).next().slideUp(500,function(){
$(this).prev().removeClass("open");
//window.location.href=$(this).prev().find("a").attr("src");
});
}
}
else
{
$(this).parent().find("ul").slideUp("slow").end().find("h3").removeClass("open");
$(this).addClass("open").next().slideDown(500,function(){
if ($(this).nextAll("h3").size()>0)
{$(this).parent().find("h3").last().css("border-bottom-width","1px");}
else
{$(this).parent().find("h3").last().css("border-bottom-width","0");}
window.location.href=$(this).prev().find("a").attr("src");
});
}
return false;
});
</script>
<br><div align="center">提示：如果有错误，请刷新页面。</div>
</body>
</html>I hope this article will be helpful to everyone’s jQuery programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Google Pixel 9 Pro Fold phone case exposed: 6.4-inch outer screen, 8.02-inch inner screen
Jun 25, 2024 pm 02:35 PM
According to news on June 25, the source ytechb published a blog post yesterday (June 24), sharing a rendering of the Google Pixel 9 Pro Fold mobile phone case, once again showing the design of the back of this folding screen. According to previous news, Google will release the Pixel 9 series of mobile phones in October this year. In addition to the three phones in the Pixel 9 series, Pixel Fold will also be included in the Pixel 9 series and will be officially named Pixel 9 Pro Fold. The phone case exposed this time comes from accessory manufacturer Torro. The company's UK and US online stores have listed the product phone case and disclosed the design and display size of the phone. The page shows a large number of Pixel 9 Pro Fold phone case renderings
Samsung's 10,000-yuan foldable phone W25 revealed: 5-megapixel under-screen front camera and thinner body
Aug 23, 2024 pm 12:43 PM
According to news on August 23, Samsung is about to launch a new folding mobile phone W25, which is expected to be unveiled at the end of September. It will make corresponding improvements in the under-screen front camera and body thickness. According to reports, Samsung W25, codenamed Q6A, will be equipped with a 5-megapixel under-screen camera, which is an improvement over the 4-megapixel camera of the Galaxy Z Fold series. In addition, the W25’s external-screen front camera and ultra-wide-angle camera are expected to be 10 million and 12 million pixels respectively. In terms of design, the W25 is about 10 mm thick in the folded state, which is about 2 mm thinner than the standard Galaxy Z Fold 6. In terms of screen, the W25 has an external screen of 6.5 inches and an internal screen of 8 inches, while the Galaxy Z Fold6 has an external screen of 6.3 inches and an internal screen of 8 inches.
Samsung Galaxy Z Flip 6 model first revealed: narrower bezels, creases still present
Jun 22, 2024 am 03:28 AM
According to news on June 21, foreign media recently released model photos of Samsung Galaxy Z Flip 6 on the Internet. According to the picture, it can be understood that the borders of Samsung Galaxy Z Flip 6 will be further narrowed, which means that the width of the phone may be reduced in the folded state, and it will also provide a more comfortable grip and portability. Moreover, compared with the previous generation ZFlip5, the model of Galaxy ZFlip6 is more square and the camera module on the back is more prominent. It is expected to use a new camera sensor. However, from the front, the creases of the phone are still relatively obvious, but considering that the leaked model is a model phone, there may be some differences with the real phone, so it is for reference only. In terms of performance configuration, Galaxy
The biggest shortcoming of foldable screen mobile phones: no core application scenarios
Mar 16, 2024 am 09:04 AM
What we are discussing today is not what a certain product is like, but returning to the topic of "folding screen" itself and exploring the "rationality" of folding screen mobile phones. First, let’s take a look at the market performance of folding screen mobile phones. According to IDC’s latest data report, China’s folding screen mobile phone market will ship approximately 7.007 million units in 2023, a year-on-year increase of 114.5%. Among them, China's foldable screen mobile phone market shipped approximately 2.771 million units in the fourth quarter of 2023, a year-on-year increase of 149.6%. The data does look good, and the growth is also very strong. However, compared with the approximately 270 million smartphone shipments in the Chinese market in 2023, this data is really not enough. In general
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
Do you want to know about word folding?
Mar 19, 2024 pm 07:49 PM
After editing text content in Word, you need to view and check the edited content. If there is a lot of content, it is inconvenient to read it. How to solve this problem? In this case, the word folding method is needed. Let me share the method tutorial with you guys! First, open the Word document on your computer, enter the required content and select it, then click the "Start" option in the menu bar, and then select a style to apply to the text paragraph you just selected. You can refer to the part marked with a red circle in the picture below. 2. Then, the selected text paragraph will change its style and add a small arrow, as shown in the red circle in the picture below: 3. Click the small arrow to freely expand or collapse the previously selected text paragraph, or directly Right click, from
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
