垂直下拉菜單顯示子菜單，單擊另一個菜單項時將關閉上一個菜單項

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