当前位置： 文江博客话题详情

JQuery 水平手风琴 CSS

发布于 2024-07-14 08:17:50 字数 3785 浏览 8 评论 0原文

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

当 Ul li Ul 滑出时，它会产生换行符，我希望所有内容都内联显示，没有中断。 我已经尝试过空白：nowrap、显示内联等它似乎不会这样做。 有任何想法吗？

根据 Glavic 的回答：我试图使用浮动，但如果我在动画期间执行 Safari 错误并闪烁子级别 UL：

使用浮动：

是的，我正在尝试这样做没有浮动。 我正在尝试坚持使用动画功能。

Safari 在动画期间出现错误并闪烁 sub 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>
原文

I'm trying to build a simple multi-level UL Horizontal Accordion (or slide menu) in Jquery. Hunter Daley graciously provided the Jquery code, but I can't seem to figure out the css. I know this is newb, but I'm really stuck.

When Ul li Ul slides out it creates a linebreak, I'd like to have everything display inline, with no breaks. I've tried whitespace: nowrap, display inline etc It just won't seem to do it. Any ideas?

As per, Glavic's answer: I was trying to to use floats, but if I do Safari bugs out and flash the sub-level UL during the animation:

Using Floats:

Right, I was trying to do it without floats.
I'm trying to stick with the animation function.

Safari bugs out and flashes the sub ul during the animation.

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

Original Post:

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

那请放手 2024-07-21 08:17:50

如果我理解正确的话，您希望将第一级和第二级菜单放在一行（水平）中吗？

尝试这个：

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

If I understand you correctly you would like to have first and second menu level in one line (horizontal) ?

Try this:

<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>
回复 原文
油饼 2024-07-21 08:17:50

我认为“display：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>

I think that "display:inline" would do the trick - but the animate function is setting the display to "block" instead of "inline".

If it is okay to "snap" into place instead of animating, you could do this instead.

<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>
回复 原文
瑾夏年华 2024-07-21 08:17:50

打造自己很有趣。 使用这个神奇功能也很有趣：
http://jqueryui.com/demos/accordion/

It's fun to build yourself. It's also fun to use this awesomeness:
http://jqueryui.com/demos/accordion/

回复 原文
~没有更多了~

关于作者

伤痕我心

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

╭⌒浅淡时光〆

文章 0 评论 0

慕巷

文章 0 评论 0

浅生活

文章 0 评论 0

bal

文章 0 评论 0

lqwuliang

文章 0 评论 0

后来的我们

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文