Как улучшить этот образец бокового меню с помощью jquery? - PullRequest
Новая
       7

Как улучшить этот образец бокового меню с помощью jquery?

0 голосов
/ 19 января 2012

У меня есть простое боковое меню с этим HTML-кодом: 

<div id="menu">
                    <div>
                        Menu Title
                    </div>
                    <ul class="menu">
                        <li>
                            <span>
                                first item
                            </span>
                            <ul>
                                <li>
                                    sub item
                                </li>
                                <li>
                                    sub item
                                </li>
                                <li>
                                    sub item
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span>
                                second item
                            </span>
                            <ul>
                                <li>sub menu</li>
                                <li>sub menu</li>
                            </ul>
                        </li>
                        <li>
                            <span>
                                third item
                            </span>
                            <ul>
                                <li>
                                    sub menu
                                </li>
                                <li>
                                    sub menu
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

и css: 

#menu{
text-align:center;
font-size:13px;
font-family:tahoma;
color:#0000AA;
padding:2px 0;}
#menu div{
color:#0000AA;}
#menu ul{
text-align:right;
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;}
#menu ul li{
display:block;
margin: 3px 2px;
cursor:hand;
cursor:pointer;}
#menu ul li span{
width:100%;
display:block;
background-color:#DDDDFF;}
#menu ul li span:hover{
background-color:#9999EE;}
#menu ul li ul{
display:none;}
#menu ul li ul li{
background-color:#EEEEEE;
margin:2px;
display: block;}
#menu ul li ul li:hover{
background-color:#FFFFFF;}
.submenu{
background-color: #CCCCFF;}

и код jquery: 

    $(window).load(function(){
  $(".submenu").children(this).slideUp("slow");
});
$(document).ready(function(){
    $('ul.menu li span').click(function(){
    $("ul.menu li").find('ul').slideUp('fast');
    $(this).parent(this).find('ul').slideDown('fast');
    });
});

и мое меню компиляции находится в http://jsfiddle.net/parseha/NkuG5/3/ эта проблема: при нажатии на первый элемент, подменю скользят вверх, а затем скользят вниз, я не хочу, чтобы этот запуск извините за этот текст и мою ошибку в содержании. спасибо.

Ответы [ 2 ]

2 голосов
/ 19 января 2012

Используйте селектор "siblings", и slideToggle () покажет или скроет DOM в зависимости от его текущего состояния.

1 голос
/ 19 января 2012

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

Этого можно добиться,добавление класса в пункт меню, когда он развернут, и удаление этого класса, когда он свернут.Наличие этого класса будет указывать, будет ли меню развернуто или свернуто.

Код запроса: 

$(window).load(function() {
    $(".submenu").children(this).slideUp("slow");
});
$(document).ready(function() {
    $('ul.menu li span').click(function() {
        if ($(this).hasClass('current'))
        {
            $(this).removeClass('current');
            $("ul.menu li").find('ul').slideUp('fast');

        }
        else
        {
            $(this).addClass('current');
            $(this).parent(this).find('ul').slideDown('fast');            

        }
    });
});

Демо

...