个人中心
gpt4 book ai didi

javascript - CSS Flyout 菜单结合滚动菜单

转载 作者：太空宇宙 更新时间：2023-11-04 13:22:12 25 4
gpt4 key购买 nike

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

最佳答案

Chrisoph 是对的。这只是胡言乱语:

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

这是语法上正确的 HTML/Javascript。去他妈的...我决定只为你编写代码，因为我很无聊，但你真的需要回到 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>

现在回去解决你的问题并测试它然后我们会看看任何新问题。

关于javascript - CSS Flyout 菜单结合滚动菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15364890/

25 4 0
文章推荐： css - 通过 Bootstrap 实现切片式页面
文章推荐： c++ - 让 CImg 在 XCode 中工作
文章推荐： html - 当 li 内的 div 向下移动时 ul 高度扩展
文章推荐： C++ 无法识别 DLL 中的命令
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com