我想要一个菜单​​子菜单使用JavaScript或任何其他方式

Question

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

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

<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并没有像我期望的那样......因为无序列表仍然显示为列表而不是隐藏....任何建议都将非常感激！..

Answer 1

你错过了这一行的结束语：

<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问题。

Answer 2

下拉菜单可以由具有relative和absolute元素的Pure 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>

---

水平

Working jsFiddle Demo

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

---

垂直

Working jsFiddle Demo

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