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

vertical drop down menu displays sub menu and when clicking on another menu item closes the previous menu item

本文关键字：菜单项 一个 垂直 菜单 显示 另一个 单击 下拉菜单      更新时间：2023-09-26

我有一个部分在我的网站的内容区，有一个链接列表，其中有子链接

使用户点击的次数尽可能少，我认为下拉菜单是最好的，然后链接将他们带到页面，等等。

我对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，因为它使事情变得更容易，你说你对此没有问题。

会发生什么:

  1. 当一个链接被点击时，这行
    var submenu = $(this).parent().children('.dl_sub_dd');首先转到链接的父元素，并从那里搜索类为.dl_sub_dd的子元素。
  2. 接下来，代码检查子元素是否可见。如果不是，它使它可见(首先隐藏任何其他可能显示的子菜单)。如果它是可见的，则代码只隐藏单击链接的子菜单。

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已经发布的相同的想法，但有一些小的增强。

  1. 它使用jQuery的幻灯片动画更流畅的用户交互
  2. 你可以在主菜单中嵌套任意深度的子菜单
  3. 当页面加载时，它打开菜单并突出显示当前页面的链接，通过将其与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>
相关文章：