垂直下拉菜单显示子菜单，单击另一个菜单项时将关闭上一个菜单项

Question

我在我网站的内容区域中有一个部分，该部分具有其中包含子链接的链接列表。

这样用户可以点击的越少越好，我认为下拉菜单将是最佳选择，然后该链接会将他们带入页面等。

我对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';
}

Answer 1

这里：

小提琴： 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
        }
    });
});

UPDATE

在您的网站上实施代码时，我总是喜欢组织得井井有条。 我总是这样做：

拥有一个index.php。 在那你放了require('page/websitename.php');
在page / websitename.php中，放置HTML页面。
您所有的JS都位于外部文件中，您可以在<head></head>链接到页面上的JS，如下所示：
<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
▼ lib
jQuery的
jquery.min.js
[其他图书馆]
[其他图书馆]
页
websitename.admin.php
websitename.login.php
websitename.php
►PHP
的index.php

php文件夹（在本概述中已关闭）可能具有另一个子文件夹“ admin”，用于管理页面专用的php脚本。
img文件夹也可以具有子结构。

你明白了:)

Answer 2

这是我在生产中实际使用的脚本，它可以完全满足您的需求。 基本上与@myfunkyside已经发布的想法相同，但是有一些小的增强。

它使用jQuery的幻灯片动画来简化用户交互
您可以将子菜单嵌套在主菜单中任意深度
页面加载后，它将打开菜单，并通过将其与URL匹配来突出显示指向当前页面的链接，这有助于用户确定方向。 此功能是连字符和破折号友好的。

jsFiddle在这里： 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>

垂直下拉菜单显示子菜单，单击另一个菜单项时将关闭上一个菜单项

问题描述

2 个解决方案

解决方案1
0 2014-06-11 00:16:58

UPDATE

解决方案2
0 2014-06-11 20:27:26

垂直下拉菜单显示子菜单，单击另一个菜单项时将关闭上一个菜单项

问题描述

2 个解决方案

解决方案1 0 2014-06-11 00:16:58

UPDATE

解决方案2 0 2014-06-11 20:27:26

解决方案1
0 2014-06-11 00:16:58

解决方案2
0 2014-06-11 20:27:26