Question

我有一个jQuery下拉菜单，但现在我的链接还没有工作：

＆＃13;

onload

＆＃13;

$(document).ready(function() {
  function visible($e) {
	if( $e.is(':visible') ) {
		return true;
	} else {
		return false;
	}
   
  }
	$('.nav .parent').find('ul').hide();

	$(document).delegate('.parent', 'click', function() {
		var $this = $(this),
			$child = $this.children('ul');

		if( visible( $child ) ) {
			$child.slideUp();
		} else {
			$child.slideDown();
		}

		return false;
	});

});

＆＃13;

我知道问题是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <ul> <li class="parent">Media <ul> <li class="parent">Videos <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> <li class="parent">Music <ul> <li class="parent">Albums <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>。但如果我删除该行，则滑动不能正常工作。因为单击子菜单项使其一直关闭到主菜单项。这是我不想要的。所以我的问题是，是否有一种简单的方法可以在保持return false;的同时使链接正常工作？

我知道通过添加如下内容：

return false

它会起作用，但我想将我的js保持在最低限度。

提前致谢

Answer 1

事件冒泡阻碍了您的链接使用return false;您需要的是：event.stopImmediatePropagation()：

只需添加此代码即可使其正常工作：

$(".child a").off("click").click(function (e) {
  e.stopImmediatePropagation();
  return true;
});

<强>段：

$(document).ready(function() {
  function visible($e) {
    if( $e.is(':visible') ) {
      return true;
    } else {
      return false;
    }

  }
  $('.nav .parent').find('ul').hide();

  $(document).delegate('.parent', 'click', function() {
    var $this = $(this),
        $child = $this.children('ul');

    if( visible( $child ) ) {
      $child.slideUp();
    } else {
      $child.slideDown();
    }

    return false;
  });

  $(".child a").off("click").click(function (e) {
    e.stopImmediatePropagation();
    return true;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="parent">Media
      <ul>
        <li class="parent">Videos
          <ul>
            <li class="child"><a href="#">Overview</a></li>
            <li class="child"><a href="#">Add</a></li>
          </ul>
        </li>
        <li class="parent">Music
          <ul>
            <li class="parent">Albums
              <ul>
                <li class="child"><a href="#">Overview</a></li>
                <li class="child"><a href="#">Add</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

尝试添加此代码，

$(".child > a").click(function(e) {
   e.stopPropagation();
})

$(document).ready(function() {
  function visible($e) {
	if( $e.is(':visible') ) {
		return true;
	} else {
		return false;
	}
   
  }
	$('.nav .parent').find('ul').hide();

$(".child > a").click(function(e) {
e.stopPropagation();
})


	$(document).delegate('.parent', 'click', function() {
		var $this = $(this),
			$child = $this.children('ul');

		if( visible( $child ) ) {
			$child.slideUp();
		} else {
			$child.slideDown();
		}

		return false;
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
  <li class="parent">Media
    <ul>
      <li class="parent">Videos
          <ul>
            <li class="child"><a href="http://www.google.co.in">Overview</a></li>
            <li class="child"><a href="http://www.google.co.in">Add</a></li>
        </ul>
      </li>
      <li class="parent">Music
        <ul>
          <li class="parent">Albums
            <ul>
              <li class="child"><a href="http://www.google.co.in">Overview</a></li>
              <li class="child"><a href="http://www.google.co.in">Add</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>

jQuery下拉菜单链接不起作用

2 个答案: