javascript - jQuery 下拉菜单链接不起作用

Question

我有一个 jQuery 下拉菜单，但现在我的链接不起作用:

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

});

<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 ？

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

$(document).delegate('li.child a', 'click', function() {
        var $this = $(this),
            $url = $this.attr('href');

        window.location = $url;
    });

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

提前致谢

Answer 1

尝试添加此代码，

$(".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>