0

我已经搜索并尝试了多种方法来实现这一点无济于事......

我在下面提供了我当前的代码......请随时批评并提供任何必要的帮助......

<script src="jquery.js"></script>
<div id="navigation">
<p><a href="#" id="toggle">Leave A Note</a></p>
<ul id="menu">



<li><a href="/#" class="theengineer">Artist</a><ul>
    <li><a href="#" class="Sketchbook">Sketchbook</a></li><li><a href="#" class="Music">Music</a></li><li><a href="#" class="Artwork">Artwork</a></li><li>
    <a href="#" class="Media">Media</a></li><li><a href="#" class="Words">Words</a></li></ul>
    </li>
    <li><a href="/#" class="theengineer">UI/UX Developer</a><ul><li><a href="#" class="Portfolio">Portfolio</a></li><li><a href="#" class="resume">Resume</a></ul></li></div>

<!--above is the html container-->
<!--Now add javascript to control the hiding and such-->

<script>

var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';

$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();

hideMenu = function() {
    $('#navigation ul#menu').hide();
    $('#navigation').removeClass('Open');
    $('#toggle').text(showMenuText);
    }
    $('#toggle').click(function(event){
        event.stopPropogation(); event.preventDefault();
        $('#navigation ul#menu').toggle();
        $('#navigation').toggleClass('open');
        var toggleText = $('#toggle').text();

        (toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);});
        $('ul#menu > li > a').click(function(event){
            $this = $(this);
            if ($this.hasClass('page') ) parent.location = $this.attr('href');
            if ($this.hasClass('home') ) { parent.location = '/'; }

            event.preventDefault(); event.stopPropagation();
            if( $this.hasClass('active') ) var justclosed = true;
            $('a.active').removeClass('active').next('ul').hide();
            if(!justclosed) $this.addClass('active').next('ul').show();
            });
            </script>

这里

javascript没有像我期望的那样做..因为无序列表仍然显示为列表并且没有隐藏..任何建议将不胜感激！..

4

2 回答 2

0

你在这一行缺少一个结束的 li ：

<li><a href="/#" class="theengineer">UI/UX Developer</a><ul><li><a href="#" class="Portfolio">Portfolio</a></li><li><a href="#" class="resume">Resume</a></ul></li></div>

这应该是

<li><a href="/#" class="theengineer">UI/UX Developer</a><ul><li><a href="#" class="Portfolio">Portfolio</a></li><li><a href="#" class="resume">Resume</a></li></ul></li></div>

也许这导致了javascript问题。

于 2013-06-04T22:25:49.370 回答
0

下拉菜单可以通过带有relative和absolute元素的纯 CSS 来完成。考虑以下 HTML：

<ul>
    <li>Level 1</li>
    <li>
        Level 2
        <ul>
            <li>Level 2-1</li>
            <li>Level 2-2</li>
            <li>Level 2-3</li>
            <li>Level 2-4</li>
            <li>Level 2-5</li>
        </ul>
    </li>
    <li>Level 3</li>
    <li>Level 4</li>
    <li>Level 5</li>
</ul>

水平的

工作 jsFiddle 演示

在此处输入图像描述

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul ul {
    position: absolute;
    top: 20px;
    left: -1px;
    display: none;
}

ul ul li + li {
    margin-left: 0;
    margin-top: -1px;
}

ul li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: blue;
    border: 1px solid blue;
    width: 150px;
    float: left;
    text-align: center;
    cursor: pointer;
    height: 20px;
}

ul li + li {
    margin-left: -1px;
}

ul li:hover {
    background: #b0e0e6;
}

ul li:hover ul {
    display: block;
}

垂直的

工作 jsFiddle 演示

在此处输入图像描述

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul ul {
    position: absolute;
    top: -1px;
    left: 150px;
    display: none;
}



ul li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: blue;
    border: 1px solid #4169e1;
    width: 150px;
    text-align: center;
    cursor: pointer;
    height: 20px;
}

ul li + li {
    margin-top: -1px;
}

ul li:hover {
    background: #b0e0e6;
}

ul li:hover ul {
    display: block;
}
于 2013-06-06T04:22:56.153 回答