内部链接孩子们无法正常使用 jquery

Question

我有一个带有以下 HTML 的下拉菜单：

<ul id="dropdownmenu" class="dropdown maintopmenu">

<li class="topmenu" link="link0.htm">SELL
    <ul>
        <li link="link1.htm"><span class="menulink">APPLY TO SELL</span>/li>
        <li link="link2.htm"><span class="menulink">FEE/FEATURES</span></li>
        <li link="link3"><span class="menulink">FAQ</span></li>
        <li link="mycart.php?4"><span class="menulink">IMAGE GUIDELINE</span></li>
    </ul>
</li>
</ul>

然后我有一个 jquery 函数，该函数应该在单击时转到页面 link=whatever 。不过，它所做的始终是转到第一个 li 链接（主要父级）。 我的猜测是它忽略了该里内的整个块。

$(function() {
    $('li[link]').click(function() {
    document.location.href=($(this).attr('link'));
});
});

我需要它与所有级别的子菜单一起使用。

Answer 1

可能是因为事件正在冒泡到祖先

并触发其处理程序。

您需要使用 event.stopPropagation()^(docs) 方法或return false;。

$('li[link]').click(function( event ) {
    document.location.href = ($(this).attr('link'));
    event.stopPropagation();
});

Answer 2

$(function() {
          $('li').click(function(e) {
          var $var = $(this).attr("link");
              alert($var);
              e.stopPropagation();
          //document.location.href=($(this).attr('link'));
         } );
    });

使用 e.stopPropagation();

希望这有帮助

Answer 3

我建议不要在 html 中使用奇怪且无效的属性，如果不可避免，请使用 jQuery 创建传统标记，例如：

$('li').each(
    function(){
        var linkTo = $(this).attr('link');
        $(this).find('span').wrap('<a href="' + linkTo + '"></a>');
    });

JS Fiddle 演示。

但我强烈建议使用 a 元素而不是 JavaScript malarkey，特别是因为 JS/jQuery 在没有 JS 的情况下不会很好地退化。

Answer 4

很简单，在 func 末尾放一个 return false 即可。

$(function() {
    $('li[link]').click(function() {
        document.location.href=($(this).attr('link'));
        return false;
    });
});

它的工作完美！