Question

我的菜单下拉有问题，不知道为什么。这是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））。但不知道为什么。

最好的问候

Answer 1

可能会替换此代码：

            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中的所有数组都被认为是真的，即使它们是空的。

Answer 2

好的，当您测试是否打开了任何子菜单时，您应该关闭它们，因此应删除if语句if ( $(this).not(menu) )和内部代码。

PS：从jQuery站点，.not()方法返回一个jQuery对象，然后if语句错误，因为它始终是真的...

您应该做的是：测试menu是否已打开并将其存储到变量中，然后关闭所有打开的子菜单，如果opened为false，请打开menu < / p>

Answer 3

$('.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');      
                });  
            } 
        }       
});

Jquery - ul slidedown slideup

3 个答案: