JQuery Горизонтальный Аккордеонный CSS - PullRequest
Новая
       17

JQuery Горизонтальный Аккордеонный CSS

1 голос
/ 25 февраля 2009

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

Когда Уль ли Уль выдвигается, это создает разрыв строки, я бы хотел, чтобы все отображалось в строке без разрывов. Я пробовал пробельные символы: nowrap, отображать inline и т. Д. Похоже, он этого не сделает. Есть идеи?

В соответствии с ответом Главича: я пытался использовать поплавки, но если я делаю ошибки Safari и высвечиваю UL подуровня во время анимации:

Использование поплавков:

Да, я пытался сделать это без поплавков. Я пытаюсь придерживаться функции анимации.

Во время анимации Safari выдает ошибку и мигает субл. 

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

1 голос
/ 25 февраля 2009

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

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

<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>
0 голосов
/ 25 февраля 2009

Забавно строить себя. Также интересно использовать эту удивительность: http://jqueryui.com/demos/accordion/

0 голосов
/ 25 февраля 2009

Я думаю, что "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>
...