Question

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

以便用户点击尽可能少的金额，我认为下拉菜单最好，然后该链接会将他们带入页面等。

我对javascript或jquery一无所知所以我找到的所有例子对我都没有用，因为我甚至不知道从哪里开始修改它们以满足我的需要。

我希望发生什么：当用户点击链接时，列表会从所有子页面中删除。

PAGE LINK 1
| - 子页面 | --sub page

PAGE LINK 2
| - 子页面 | --sub page

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
        }
    });
});

的更新

在您的网站上实施代码时，我总是希望真正有条理。我总是这样做：

有一个index.php。你放了require('page/websitename.php');

在页面/ 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-foldes中，图像位于img-folder中等

你会有这样的结构：

▼ [主文件夹]
的 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文件夹（在此overbiew中关闭）可能有另一个子文件夹“admin”用于管理页面专用的php脚本。
img-folder也可以有一个子结构..

你明白了这一点：）

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 个答案:

的更新