3

我是 javascript 新手，在使用菜单时遇到了问题。我可以使用弹出菜单，也可以使用滚动菜单（滚动菜单演示http://css-tricks.com/examples/LongDropdowns/）。

但是，我无法弄清楚如何合并效果。有人可以帮我下面的弹出代码吗？

//HTML

<ul class="dropdown">
<li><a href="#">CITIES BY STATE</a>
<ul>
for (var p = 0; p < state.length; p++) {

    <li><a href="#"> + states[p][0] + "</a>");

    <ul  id="city\" class="city">
    <li>CITY 1</li>
    <li>CITY 2</li>
    <li>CITY 3</li>
    </ul>");

    </li>");

}   
</ul>
</ul>
</li>

//允许滚动列表的脚本

<script>
    var maxHeight = 600;

    $(function(){

        $(".dropdown > li").hover(function() {

            var $container = $(this),
            $list = $container.find("ul"),
            $anchor = $container.find("a"),
            height = $list.height() * 1.1,       // make sure there is enough room at the bottom
            multiplier = height / maxHeight;     // needs to move faster if list is taller

            // need to save height here so it can revert on mouseout            
            $container.data("origHeight", $container.height());

            // so it can retain it's rollover color all the while the dropdown is open
            $anchor.addClass("hover");


            // don't do any animation if list shorter than max
            if (multiplier > 1) {
                $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
            }

        }, function() {

            var $el = $(this);

            // put things back to normal
            $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .show()
            .find("a")
            .removeClass("hover");    
        });                                      
    });                  
</script>

这是我尝试过的，但我已经离开了。当我将鼠标悬停在一个州上时，我希望在州列表的右侧显示一个城市列表。

/*code to show/hide city menu*/

#city li:hover ul ul, #city li:hover ul ul ul, #city li:hover ul ul ul ul{
display:none;
}

#city li:hover ul, #city li li:hover ul, #city li li li:hover ul, #city li li li li:hover ul{
display:block;
}
4

1 回答 1

0

Chrisoph is right. This is just jibberish:

<ul class="dropdown">
<li><a href="#">CITIES BY STATE</a>
<ul>
for (var p = 0; p < state.length; p++) {

    <li><a href="#"> + states[p][0] + "</a>");

    <ul  id="city\" class="city">
    <li>CITY 1</li>
    <li>CITY 2</li>
    <li>CITY 3</li>
    </ul>");

    </li>");

}   
</ul>
</ul>
</li>

This is syntactially correct HTML/Javascript. Screw it... I decided to just code it for you because I'm bored, but you really need to go back to basics in HTML/JavaScript.

<html>        
    <head>        
        <title>test</title>        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>        
        <script type="text/javascript">        
            $(document).ready(function()        
            {        
                var map = [        
                    {state: "NSW", cities: ["Sydney", "Newcastle", "Orange"]},        
                    {state: "QLD", cities: ["Brisbane", "Cairns", "Townsville"]},        
                    {state: "VIC", cities: ["Melbourne", "Geelong", "Ballarat"]},        
                    {state: "SA", cities: ["Radelaide", "Mount Gambier"]},        
                    {state: "TAS", cities: ["Hobart", "Devonport", "Launceston"]}        
                 ];        

                for (var i = 0; i < map.length; i++)         
                {        
                    var a = $('<a href="#">').html(map[i].state);        
                    var li = $('<li>').append(a);        
                    var cities = $('<ul>').attr('id', map[i].state).addClass('cityList');        

                    for(var j = 0; j < map[i].cities.length; j++)        
                    {        
                        cities.append($('<li>').html(map[i].cities[j]));        
                    }        

                    li.append(cities);        

                    $('#citiesByState').append(li);        
                }        
            });        
        </script>        
    </head>        
    <body>        
        <ul class="dropdown">        
            <li>        
                <a href="#">CITIES BY STATE</a>        
                <ul id="citiesByState"></ul>
            </li>        
        </ul>        
    </body>        
</html>

Now go back and fix your question and test it then we'll look at any new problems.

于 2013-04-24T16:11:25.637 回答