Question

我做了一个菜单，它有几个菜单项。单击每个菜单项将触发下拉效果。这里的问题是当我点击第一个菜单项时，第二个菜单项也会有下拉效果。那么我应该如何修改jQuery呢？提前致谢！这是Html代码。

            <nav>
                <ul class="category">
                    <li ><a href="" >News</a>
                        <div class="menu_container">
                            <ul class="menu">
                                <li>World News</li>
                                <li>Business News</li>
                                <li>Weather News</li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="">Sports</a>
                        <div class="menu_container">
                            <ul class="menu">
                                <li>World News</li>
                                <li>Business News</li>
                                <li>Weather News</li>
                            </ul>
                        </div>
                    </li>

                </ul>
         </nav>

这是jQuery。

$(document).ready(function(){
var $menuHeight=$('.menu').height(),menuOpen=false;
$('.category li>a').click(function(event){

    event.preventDefault();
    $(this).toggleClass('triRotation');
    if(!menuOpen){
        $('.menu_container').height($menuHeight);

        menuOpen=true;
    }
    else{
        $('.menu_container').height(0);

        menuOpen=false;
    }
});});

Answer 1

您可以使用.next()获取点击的菜单项旁边的div，而不是使用变量来了解我可以使用的菜单是否为（＆＃34; :visible＆＃34 ;）

Demo

$(function() {
  $('.category li>a').click(function(event) {
    event.preventDefault();
    $(this).toggleClass('triRotation');

    var $menuContainer = $(this).next("div");

    if ($menuContainer.is(":visible")) {
      $menuContainer.hide();
    } else {
      $menuContainer.show();
    }
  });
});

jQuery-如何限制事件处理程序的范围

1 个答案: