jquery - 在我附加 jquery 代码以创建可扩展菜单后，我的 链接无法响应

Question

我是 php、html 和 css 方面的网络开发人员。最近我尝试创建可扩展菜单，它们确实使用下面的代码工作，但是每当我在 <ul> 中创建链接时使用 class 'expList 时，链接不会响应，而只有当我右键单击并在新选项卡上打开时它们才会打开。

function prepareList() {
  $('#expList').find('li:has(ul)')
  	.click( function(event) {
  		if (this == event.target) {
  			$(this).toggleClass('expanded');
  			$(this).children('ul').toggle('medium');
  		}
  		return false;
  	})
  	.addClass('collapsed')
  	.children('ul').hide();
  };
 
  $(document).ready( function() {
      prepareList();
  });

#listContainer{
  margin-top:15px;
}
 
#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
	font-size: 18;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}
 
/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(../img/expanded.png);
}

<div id="ListContainer">
  <ul id="expList">
<li><img src="/images/dashboard.jpg" height="35" width="35" />&nbsp;&nbsp;Dashboard</li>
<br />
<br />
<br />
<li><img src="/images/chat-.jpg" />&nbsp;&nbsp;Messaging
  <ul>
    <li><a href="/quick-message">Single message</a></li>
    <li><a href="quick-message">Multiple Messages</a></li>
    <li>Overview</li>
    <li>Message Templates</li>

Answer 1

您总是使用return false 停止事件处理程序。这将适用于从链接冒泡的点击。

将 return false 放在切换检查中:

        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
            return false;
        }

为了提高效率，我建议您改用委托(delegate)事件处理程序，附加到您的 UL。例如喜欢:

  function prepareList() {
    $('#expList').on('click', 'li:has(ul)', function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded').children('ul').toggle('medium');
            return false;
        }
    });
    $('#expList li:has(ul)').addClass('collapsed').children('ul').hide();
  };

此版本仅附加到一个元素并在事件时间应用后代选择器(因此它还支持动态添加的元素，如果您需要的话)。