锚点在可折叠列表中不起作用答案

【问题标题】：Anchor doesn't function in collapsible list锚点在可折叠列表中不起作用
【发布时间】：2014-11-27 15:13:31
【问题描述】：

下面是可折叠列表的 Jquery 代码。

<script type="text/javascript">
$(function(){
    $('li')
        .css('pointer','default')
        .css('list-style-image','none');
    $('li:has(ul)')
        .click(function(event){
            if (this == event.target) {
                $(this).css('list-style-image',
                    (!$(this).children().is(':hidden')) ? 'url(plusbox.gif)' : 'url(minusbox.gif)');
                $(this).children().toggle('slow');
            }
            return false;
        })
        .css({cursor:'pointer', 'list-style-image':'url(plusbox.gif)'})
        .children().hide();
    $('li:not(:has(ul))').css({cursor:'default', 'list-style-image':'none'});
});

下面是一个列表元素的例子

<legend>Collapsable List Demo</legend>
    <ul >
      <li>INTRODUCTION
        <ul>
          <li><a href = "index.html">How To Use These Guidelines</a></li>
          <li>Revision History</li>
        </ul>
      </li>
    </ul>

Fiddle

该列表完美运行，但是每当我向元素添加 href 时，它是不可点击的。但是，如果我右键单击并选择“在新选项卡中打开”它可以工作。所以我知道所有的 HTML 都是正确的。 Jquery 代码限制了重定向。

【问题讨论】：

return false 阻止链接运行。为什么需要它？

标签： jquery list href collapsable

【解决方案1】：

似乎删除 return false 可以解决问题而没有副作用。

if (this == event.target) {
    $(this).css('list-style-image', (!$(this).children().is(':hidden')) ? 'url(plusbox.gif)' : 'url(minusbox.gif)');
    $(this).children().toggle('slow');
}
// return false;

Demo

【讨论】：