jqueryjquerycssaccordion

JQuery Horizontal Accordion CSS

просмотры: 6K

Я пытаюсь создать простой многоуровневый горизонтальный аккордеон UL (или слайд-меню) в JQuery. Хантер Дейли любезно предоставил код JQuery, но я не могу понять css. Я знаю, что это новинка, но я действительно застрял.

Когда Ul li Ul выдвигается, он создает разрыв строки, я бы хотел, чтобы все отображалось в строке, без разрывов. Я пробовал пробелы: nowrap, display inline и т. Д. Кажется, это просто не работает. Любые идеи?

Согласно ответу Главича: я пытался использовать поплавки, но если я исправлю ошибки 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>
Источник

Ответов (3)

Решение

Если я вас правильно понял, вы хотите, чтобы первый и второй уровень меню располагались в одной строке (горизонтальной)?

Попробуй это:

<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>
Источник

Я думаю, что «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>
Источник

Строить самому - весело. Также интересно использовать это великолепие: http://jqueryui.com/demos/accordion/

Источник