Jquery - слайд слайд уль - PullRequest
Новая
       45

Jquery - слайд слайд уль

0 голосов
/ 14 марта 2012

У меня проблемы с выпадающим меню, и я не знаю почему. Вот HTML-код: 

<ul>
                            <li>
                                <font style="font-size: 12px;"><a href="?id=1" class="links">Quartos e Suites</a></font>
                                <img src="imgs/DownArrow.gif" class="arrowup" style="width:13px;height:13px">
                                <ul class="submenu">
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Suite Presidencial</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Suite Executiva</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Suite Junior</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Quarto Superior</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Quarto Standart</a></font></li>
                                </ul>
                            </li>
                            <li>
                                <font style="font-size: 12px;"><a href="?id=2" class="links">Restaurante e Bar</a></font>
                                <img src="imgs/DownArrow.gif" class="arrowup" style="width:13px;height:13px">
                                <ul class="submenu">
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Suite Presidencial</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Suite Executiva</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Suite Junior</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Quarto Superior</a></font></li>
                                    <li><font style="font-size: 12px;"><a href="?id=1" class="links">Quarto Standart</a></font></li>
                                </ul>
                            </li>

                        </ul>

и jquery: 

$('.arrowup').click(function(){        
    var menu = $(this).next('ul');  
    var thisimage = $(this);
        //check if is any open and close
        allmenu = $('.submenu:visible');
        if(allmenu.size() != 0){
           allmenu.slideUp(function(){ 
                $(this).prev('img').attr('src', 'imgs/DownArrow.gif'); 
                //check is the one is closing is not the one clicked
                if($(this).not(menu)){
                   menu.slideDown(function(){ 
            thisimage.attr('src', 'imgs/UpArrow.gif');      
        });
                }       
       });
        }else{
        //open the one clicked
         alert(3);
         $(this).next('ul').slideDown(function(){ 
            thisimage.attr('src', 'imgs/UpArrow.gif');      
        });  
        } 
});

Основная проблема заключается в том, что когда открывается открытое окно, оно закрывается и открывается. ошибка здесь: if ($ (this) .not (menu)). но не знаю почему.

С наилучшими пожеланиями

Ответы [ 3 ]

0 голосов
/ 14 марта 2012

Хорошо, когда вы проверяете, открыто ли какое-либо подменю, вы должны просто закрыть их, поэтому оператор if if ( $(this).not(menu) ) и внутренний код должны быть удалены.

PS: с сайта jQuery, метод .not()вернуть объект jQuery, а затем, если оператор неверен из-за того, что он всегда будет истинным ...

Что вам нужно сделать: проверить, открыт ли menu, сохранить его в переменной и закрыть всеПодменю открыто, затем, если opened ложно, откройте menu

0 голосов
/ 15 марта 2012 
$('.arrowup').click(function(){        
    var menu = $(this).next('ul');  
    var thisimage = $(this);
        //check if is any open and close
        allmenu = $('.submenu:visible');
        if(menu.is(':visible')){

        }else{
            if(allmenu.size() != 0){             
                allmenu.slideUp(function(){ 
                    $(this).prev('img').attr('src', 'imgs/DownArrow.gif');
                     menu.slideDown();      
                });

            }else{
                //open the one clicked
                 $(this).next('ul').slideDown(function(){ 
                    thisimage.attr('src', 'imgs/UpArrow.gif');      
                });  
            } 
        }       
});
0 голосов
/ 14 марта 2012

Возможно заменить этот код: 

            if($(this).not(menu)){
               menu.slideDown(function(){ 
        thisimage.attr('src', 'imgs/UpArrow.gif');      
    });
            }

с этим: 

               menu.not(this).slideDown(function(){ 
        thisimage.attr('src', 'imgs/UpArrow.gif');      
    });

Объяснение: " not " берет набор элементов, фильтрует его и возвращает новый набор элементов, которые не соответствуют селектору, ссылке или функции. Бессмысленно и бесполезно проверять этот набор элементов в операторе if. Коллекция элементов jQuery - это в основном причудливый массив, и все массивы в Javascript считаются истинными при преобразовании в логическое значение, даже если они пусты.

...