我网站的内容区域中有一个部分，其中包含一个包含子链接的链接列表。
为了让用户点击次数尽可能少，我认为下拉菜单是最好的，然后该链接会将他们带到页面等。
我对 javascript 或 jquery 一无所知，所以我找到的所有示例对我来说几乎没有用，因为我什至不知道从哪里开始修改它们以满足我的需要。
我希望发生的事情: 当用户单击链接时，会从链接中下拉出一个包含所有子页面的列表。
页面链接 1
|--子页面
|--子页面
页面链接 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';
}
最佳答案
这里:
fiddle :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/websitename.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
网站名称.admin.css
网站名称.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”，用于管理页面专门使用的 php 脚本。
img 文件夹也可能有一个子结构..
你明白了:)
关于javascript - 垂直下拉菜单显示子菜单，当单击另一个菜单项时关闭上一个菜单项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24152571/