我有一个部分在我的网站的内容区,有一个链接列表,其中有子链接
使用户点击的次数尽可能少,我认为下拉菜单是最好的,然后链接将他们带到页面,等等。
我对javascript或jquery一无所知,所以我找到的所有示例对我来说几乎没有用处,因为我甚至不知道从哪里开始修改它们以满足我的需求。
我希望发生的事情:当用户单击该链接时,一个包含所有子页面的列表从其中拉出。
PAGE LINK 1
| - - -子页面
| - - -子页
PAGE LINK 2
| - - -子页面
| - - -子页
jsFiddle链接:http://jsfiddle.net/hHn7b/
我需要它做的唯一的事情是,虽然它确实切换子页面的显示,我需要它也当另一个链接被点击它会关闭以前打开的下拉菜单。(想想单选按钮是如何工作的)
我不害怕使用javascript,甚至jquery的东西,如果我需要,但我不知道足够做自己,我没有时间目前尝试和学习如何甚至足够修改别人的jquery代码,他们张贴在这个网站上的其他问题。
下面是来自jsFiddle的代码:
HTML:
<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd');">PAGE LINK 1</span>
</div>
<div id="dl_sub_dd">
<ul>
<li>sub page</li>
<li>sub page</li>
</ul>
</div>
<!--end dept_links_sub-->
<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd1');">PAGE LINK 2</span>
</div>
<div id="dl_sub_dd1">
<ul>
<li>sub page</li>
<li>sub page</li>
</ul>
</div>
CSS: span {
cursor:pointer;
}
#dl_sub_dd, #dl_sub_dd1 {
display:none;
}
JS:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
这里:
小提琴:http://jsfiddle.net/nkKja/
我使用了jQuery,因为它使事情变得更容易,你说你对此没有问题。
会发生什么:
- 当一个链接被点击时,这行
var submenu = $(this).parent().children('.dl_sub_dd');
首先转到链接的父元素,并从那里搜索类为.dl_sub_dd
的子元素。 - 接下来,代码检查子元素是否可见。如果不是,它使它可见(首先隐藏任何其他可能显示的子菜单)。如果它是可见的,则代码只隐藏单击链接的子菜单。
HTML:(两个元素是相同的,除了'PAGE LINK 1'文本)
<div class="dl_parent">
<div class="dl_link">PAGE LINK 1</div>
<div class="dl_sub_dd">
<ul>
<li>sub page</li>
<li>sub page</li>
</ul>
</div>
</div>
CSS: .dl_link {
cursor:pointer;
}
.dl_sub_dd {
display:none;
}
JS:
$(window).on('load',function(){
$('.dl_link').click(function(){
var submenu = $(this).parent().children('.dl_sub_dd');
if (submenu.css('display') == 'none') {
$('.dl_sub_dd').hide(); //first hide any previously showing submenu's
submenu.show(); //then show the current submenu
} else {
submenu.hide(); //hide the current submenu again
}
});
});
在你的网站上执行代码时,我总是喜欢真正有条理。我总是这样做:
- 有一个index.php。在这里输入
require('page/websitename.php');
- 在page/websitnames .php中,你把你的html页面。
你所有的JS都在外部文件,你链接到你的页面在
<head></head>
像这样:<script type="text/javascript" src="js/websitename.js"></script>
像这样链接到库文件(如jQuery):
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
php文件在php文件夹中,图像在img文件夹中,等等
你会有一个像这样的结构:
▼[主文件夹]
,,,,,css
,,,,,,, websitename.admin.css
,,,,,,, websitename.css
,,,,,,, websitename.login.css
,,► img
,,,,, js
,,,,,,, websitename.admin.js
,,,,,,, websitename.js
,,▼自由
,,,,,,,jquery
,,,,,,,,, jquery.min.js
,,,,,,,(其他库)
,,,,,,,(其他库)
,,,,,
,,,,,,, websitename.admin.php
,,,,,,, websitename.login.php
,,,,,,, websitename.php
,,php►
,,,, index . php
php文件夹(在这个概述中被关闭)可能有另一个子文件夹"admin",用于专门由admin页面使用的php脚本。
img文件夹也可以有子结构..
你明白了:)
这是我在生产中实际使用的一个脚本,它正是您正在寻找的。基本上与@myfunkyside已经发布的相同的想法,但有一些小的增强。
- 它使用jQuery的幻灯片动画更流畅的用户交互
- 你可以在主菜单中嵌套任意深度的子菜单
- 当页面加载时,它打开菜单并突出显示当前页面的链接,通过将其与URL进行匹配,这在一定程度上帮助用户定位。此函数支持连字符和破折号。
jsFiddle here: http://jsfiddle.net/contendia/ddXBU/4/
CSS:<style>
#leftmenu h3 {
margin:0;
padding:2px 5px;
border-top:1px solid #006699;
border-bottom:1px solid #003366;
cursor:pointer;
background-color:#0e559d;
color:#ffffff;
text-align:left;
}
#leftmenu h3:hover {
background-color:#003366;
}
#leftmenu > ul {
margin:0;
padding:0;
}
#leftmenu > ul li {
padding-left:10px;
list-style-type:none;
}
#leftmenu > ul li a {
color:#666666;
font-weight:bold;
text-decoration:none;
}
#leftmenu > ul li a:hover {
text-decoration:underline;
}
#leftmenu .current {
color:#006699;
text-decoration:underline;
}
</style>
JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Get the URI path and strip the leading slash
var path = $(location).attr('pathname').replace(///, "");
// Get and append the querystring
path += $(location).attr('search');
// Hide everything
$('#leftmenu ul').hide();
// Go up 2 levels (a > li > ul) and open. Hide all others.
$('#leftmenu a[href="' + path + '"]').addClass('current').parent().parent().slideDown();
$('#leftmenu h3').click(
function() {
var $this = $(this);
$this.next('ul').siblings('ul').slideUp();
$this.next('ul').find('ul').slideUp();
$this.next().slideToggle(300);
});
});
</script>
HTML: <div id="leftmenu">
<h3>First Menu</h3>
<ul>
<li><a href="page_number_one">Underscores</a></li>
<li><a href="page-number-two">Hyphens</a></li>
</ul>
<h3>Second Menu</h3>
<ul>
<li><a href="page_number_three">Underscores</a></li>
<li><a href="page-number-four">Hyphens</a></li>
<li>
<h3>Sub Menu</h3>
<ul>
<li><a href="sub_page_number_one">Underscores</a></li>
<li><a href="sub-page-number-two">Hyphens</a></li>
</ul>
</li>
</ul>
</div>