jquery 左侧展开栏目

最新推荐文章于 2021-05-30 21:04:47 发布
最新推荐文章于 2021-05-30 21:04:47 发布
阅读量99 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/lin3615/p/3590777.html
版权

<!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>my_news</title>
<style>
*{padding:0;list-style:none;margin:0;}
body{background:#666;}
.linBox{margin-top:10px;margin-left:10px;width:70px;}
.linBox ul li a{color:#fff; font-size:12px; text-decoration:none;background:#333;padding:8px;margin:4px;float:left;border:1px solid #fff;position:relative; width:100px;}
.linBox ul li .linBoxList{background:#ccc; height:330px;width:300px;position:absolute; left:118px;border:1px solid #fff; font-size:12px;color:#000;padding:10px;display:none;top:14px;z-index:1;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".linBox ul li").hover(function(){
        $(this).find(".linBoxList").show();
    },
    function(){
        $(this).find(".linBoxList").hide();
    });
});
</script>
</head>
<body>
<div class="linBox">
    <ul>
        <li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">mmmmmm</a> <a href="">mmmmmm</a> <a href="">mmmmmm</a>
            </div>
        </li>

        <li>
            <a href="">yyyyyyyyyyy</a>
            <div class="linBoxList">
            <a href="">yyyyyyyyyy</a>
            </div>
        </li>

        <li>
            <a href="">zzzzzzzzzz</a>
            <div class="linBoxList">
            <a href="">zzzzzzzzz</a>
            </div>
        </li>

        <li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">1111111111111</a>
            </div>
        </li>

        <li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">1111111111111</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/lin3615/p/3590777.html

weixin_30311605
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery从左向右展开DIV（动画效果）
huang100qi的专栏
09-27 1万+
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb
树状菜单 点击一个关闭另一个 默认第一个栏目的子栏目展开
zhaodao
05-15 1422
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}-->body {margin:0;text-alig
jquery左侧点击展开二级菜单导航插件
04-05
NULL 博文链接：https://leeqoo.iteye.com/blog/1532895
jQuery 左侧菜单 展开、闭合 &三元运算
weixin_30593443的博客
07-31 116
点击展开，再点闭合 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ ...
jquery表格展开合并
06-13
本主题将深入探讨如何利用jQuery实现表格的展开和合并功能，这在数据展示和交互性方面具有重要意义。 首先，我们需要理解表格的基本结构。HTML表格由`<table>`元素开始，其中包含`<tr>`（行）和`<td>`（单元格）...
jQuery栏目切换
07-26
本文将深入探讨如何使用jQuery实现栏目切换的效果，并提供相关的文件资源。 首先，理解jQuery的基本操作是关键。jQuery通过选择器选中页面中的元素，然后对这些元素执行各种操作。例如，`$("#id")` 会选取ID为"id...
jquery展开折叠插件特效代码
03-20
《jQuery展开折叠插件特效代码解析》 在Web开发中，jQuery库因其简洁的API和强大的功能而广受欢迎。尤其在实现页面交互效果时，展开和折叠操作是常见的需求，例如菜单、侧边栏、评论等。本篇文章将深入探讨jQuery...
jQuery弹性展开收缩菜单插件
10-30
在本篇文章中，我们将深入探讨"jQuery弹性展开收缩菜单插件"这一主题，以及如何利用jQuery实现这样的功能。 一、jQuery基础 在了解弹性展开收缩菜单之前，我们需要对jQuery的基本用法有所了解。jQuery通过一句简单...
jQuery展开收缩树形菜单特效代码
03-20
**jQuery展开收缩树形菜单特效代码详解** 在网页设计中，树形菜单是一种常见的组织信息的方式，它能够清晰地展示层级关系，使用户更方便地浏览和操作数据。`jQuery`，作为一款广泛使用的JavaScript库，提供了丰富的...
右侧弹窗tab切换以及向左展开，向右收起的实现方法
HuLuWa1997的博客
04-08 720
我要实现的效果是将一个弹窗像左展开向右收起，实现方法如下： DOM层代码： <div class="unfold-away-wrap"> <div class="unfold-away-btn"></div> <ul class="tab-wrap"> <li class="tab-active"> <span>内容一</span>
【Javascript】【jQuery】jQuery实现淡入淡出，折叠展开，显示隐藏和自定义动画
天天向上 Up Up Up (*^▽^*)
05-05 1681
//淡出至隐藏 $("#container").fadeOut(); $("#container").fadeOut("slow"); $("#container").fadeOut(2000, () => alert("fade out done")); //淡入至显示 $("#container").fadeIn(); //向上折...
jQuery 侧边栏展开收起效果
weixin_30781433的博客
06-12 936
jQuery文件： <script type="text/javascript"> $(function(){ var tit= $(".boxBar dl dt"); var con= $(".boxBar dl dd"); var list=$("dt:gt(4)"); var conBox=...
JQuery 从右侧向左滑动
韩世雷 程序员专栏
08-12 3万+
html:
jQuery展开折叠侧栏导航菜单
theScoreONE的博客
05-25 4274
< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目， <dd>< /dd>用来创建列表中最下层项目， < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。 效果图 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
实现栏目页点击父栏目展开子栏目效果。
项目三部的专栏
04-24 944
解决方法： 示例模板下载地址：http://download.csdn.net/detail/u010205757/5295455 示例模板中js代码如下： function selectLayer1(obj) {        var tabs = document.getElementById("tagtab");        for(var i=0;i
HTML实现点击展开和收起
热门推荐
07-04 6万+
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} //===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT
html点击隐藏点击展开,一个伸缩菜单，点击A栏目展开，只能点击B栏目A才伸缩隐藏，如何再次点击A就可以隐藏A_html/css_WEB-ITnose...
weixin_39732506的博客
05-30 584
前端CSSSub menu_left headingLinkLinkLink......Sub menu_left headingLinkLinkLink............/*******************************menu.js****************************/function initmenu_left() {$('#menu_left ul'...
JS实现多级栏目隐藏、显示功能（主要用递归方法隐藏主栏目所有的子栏目及子栏目的子栏目）
mytianao的博客
05-06 754
当栏目存在多级时，当点击主栏目，只会隐藏它的一级子栏目，使用递归法，就可以隐藏主栏目所有的子栏目。 //当点击某一栏目时，关闭或显示它的所有子栏目，注意：关闭时是关闭它的子栏目及子栏目的子栏目。 $("span.typcn").click(function () { var arr =[];//定义一个空数组存放所有子栏目id var id =$(this...
jquery select默认展开
最新发布
07-13
要使一个jQuery select元素在加载时默认展开，你可以使用`prop()`方法来设置`selected`属性为`true`。以下是一个示例代码： ```html <option value="option1">Option 1 <option value="option2" selected>Option...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值