Question

我正在尝试在Jquery中构建一个简单的多级UL水平手风琴（或幻灯片菜单）。 Hunter Daley慷慨地提供了Jquery代码，但我似乎无法弄清楚css。我知道这是新手，但我真的被卡住了。

当Ul li Ul滑出时会创建一个换行符，我希望所有内容都显示为内联，没有中断。我试过空白：nowrap，显示内联等它似乎不会这样做。有什么想法吗？

根据Glavic的回答：我试图使用浮点数，但是如果我在动画期间安装了Safari漏洞并刷新了子级别UL：

使用浮点数

是的，我试图在没有花车的情况下做到这一点。我正在努力坚持动画功能。

Safari在动画期间发出错误并闪现子ul。

<style type="text/css">
<!--
body {
  font-size: 1em;
  line-height: 1em;
}
ul {
  background-color: yellow;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 1em;
  float: left;
}
ul li {
  background-color: aqua;
  float: left;
}
ul li ul {
  background-color: blue;
}
ul li ul li {
  background-color: green;
}
a, a:link, a:hover, a:visited, a:active {
  color: black;
  text-decoration: none;
  float: left;
}
-->
</style>

原帖：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <title>untitled</title>
       <style type="text/css">
    <!--
    ul{ 
        list-style: none;
        background-color: yellow;
        margin: 0;
        padding: 0;
                white-space: nowrap;
            }

    ul li {
        background-color: aqua;
        display: inline;


    }

    ul li ul { 
        background-color: blue;
              }


    ul li ul li {
        background-color: green;    
    }

    a, a:link, a:hover, a:visited, a:active {
            color: black;
            text-decoration: none;

    }
    -->
    </style>

    <script type="text/javascript">
           var $current = null;
        $(document).ready(function(){
           $("ul li ul").hide(); // hide submenus by default on load

           $("ul li a").click(function(){
              var $sub = $(this).next(); 
              if ($sub.css("display") == "none")
              {
                 if ($current != null)
                    $current.animate({ width: 'hide' }); // if you want to only show one sub at a time
                 $sub.animate({ width: 'show' }); 
                 $current = $sub;
              }
              else
              {
                 $sub.animate({ width: 'hide' });
                 $current = null;
              }
           });
        });

    </script>

</head>

<body>
    <ul>
            <li>
                    <a href="#">Top-level 1</a>
            </li>
            <li>
                    <a href="#">Top-level 2</a>

                    <ul>
                            <li><a href="#">Bottom Level A1</a></li>
                            <li><a href="#">Bottom Level A2</a></li>
                            <li><a href="#">Bottom Level A3</a></li>
                            <li><a href="#">Bottom Level A4</a></li>
                    </ul>
            </li>

            <li>
                    <a href="#">Top-level 3</a>
                    <ul>
                            <li><a href="#">Bottom Level B1</a></li>
                            <li><a href="#">Bottom Level B2</a></li>
                    </ul>
            </li>

            <li>
                    <a href="#">Top-level 4</a>
            </li>
    </ul>


</body>
</html>

Answer 1

如果我理解正确，你想在一行（水平）中有第一和第二菜单级别？

试试这个：

<style type="text/css">
    ul{
        list-style: none;
        background-color: yellow;
        margin: 0;
        padding: 0;
        float: left;
    }
    ul li {
        background-color: aqua;
        float: left;
    }
    ul li ul {
        background-color: blue;
    }
    ul li ul li {
        background-color: green;
    }
    a, a:link, a:hover, a:visited, a:active {
        color: black;
        text-decoration: none;
        float: left;
    }
</style>

Answer 2

我认为“display：inline”可以解决问题 - 但是animate功能是将显示设置为“block”而不是“inline”。

如果可以“捕捉”到位而不是动画，你可以这样做。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <title>untitled</title>
    <style type="text/css">
        ul{list-style:none;background-color:yellow;margin:0;padding:0;white-space:nowrap;display:inline;}
        li ul{display:inline;}
        ul li{background-color:aqua;display:inline;}
        ul li ul{background-color: blue;}
        ul li ul li{background-color: green;}
        a, a:link, a:hover, a:visited, a:active{color: black;text-decoration: none;}
    </style>

    <script type="text/javascript">
        var $current = null;
        $(document).ready(function() {
            $("ul li ul").hide(); // hide submenus by default on load

            $("ul li a").click(function() {
                var $sub = $(this).next();
                if ($sub.css("display") == "none") {
                    if ($current != null)
                        //$current.animate({ width: 'hide' }); // if you want to only show one sub at a time
                    $current.removeAttr("display").attr({ style: "display:none;" });
                    $sub.removeAttr("style").attr({ display: "inline" });
                    $current = $sub;
                }
                else {
                    $sub.removeAttr("display").attr({ style: "display:none;" });
                    $current = null;
                }
            });
        });
    </script>
</head>

<body>
    <ul>
            <li>
                    <a href="#">Top-level 1</a>
            </li>
            <li>
                    <a href="#">Top-level 2</a>

                    <ul>
                            <li><a href="#">Bottom Level A1</a></li>
                            <li><a href="#">Bottom Level A2</a></li>
                            <li><a href="#">Bottom Level A3</a></li>
                            <li><a href="#">Bottom Level A4</a></li>
                    </ul>
            </li>

            <li>
                    <a href="#">Top-level 3</a>
                    <ul>
                            <li><a href="#">Bottom Level B1</a></li>
                            <li><a href="#">Bottom Level B2</a></li>
                    </ul>
            </li>

            <li>
                    <a href="#">Top-level 4</a>
            </li>
    </ul>


</body>
</html>

Answer 3

建立自己很有趣。使用这个很棒的功能也很有趣： http://jqueryui.com/demos/accordion/

JQuery水平手风琴CSS

3 个答案: