0

我还在学习一些关于 javascript/jquery 的知识并遇到了困难。我发布的每一篇文章似乎都使这个过程过于复杂，除非它确实需要所有额外的代码。

这就是我正在做的事情：

  • 使用滑动菜单和静态子菜单创建垂直导航菜单
  • 使用带有 DL、DT 和 DD 的 HTML (5) 布局
  • 导航菜单使用次要 CSS 进行样式设置
  • 导航菜单使用 jQuery (1.8.3)

我的一切都按我想要的方式工作，但是因为我很挑剔，所以我想在展开菜单后暂时禁用链接。如果我尝试单击已展开的菜单，它会向上滑动然后再向下滑动。我想做的是让它在它已经展开的情况下不会对点击做出反应。

导航菜单的 HTML：

<dl class="nav2">
  <dt><a href="#">Thing1</a></dt>
    <dd>
        <ul>
            <li><a href="#">Test Def1</a></li>
            <li><a href="#">Test Def2</a><li>
            <li><a href="#">Test Def3</a></li>
        </ul>
    </dd>
  <dt><a href="#">Thing2</a></dt>
    <dd>
        <ul>
            <li><a href="#">Test Def4</a></li>
            <li><a href="#">Test Def5</a><li>
            <li><a href="#">Test Def6</a></li>
        </ul>
    </dd>
  <dt><a href="#">Thing3</a></dt>
    <dd>
        <ul>
            <li><a href="#">Test Def7</a></li>
            <li><a href="#">Test Def8</a><li>
            <li><a href="#">Test Def9</a></li>
        </ul>
    </dd>
</dl>

导航菜单的 jQuery：

$(document).ready(function() {
  $("dd:not(:first)").hide();
  $("dt a").click(function() {
    /* was thinking the added code would go here, but I could be wrong */
    $("dd:visible").slideUp("fast");
    $(this).parent().next().slideDown("fast");
    return false;
  });
});

我用 bind 和 one 尝试了一些东西，但是由于我对编写 js/jquery 的困惑，我没有找到我的窍门。有没有可能这样说：

$(this:active).unbind("click");

或者

if ($(this).active(function() {
  $(this).unbind("click");
} else {
  $(this).bind("click");
)};

我知道我可能很遥远，但我正在努力。有什么方法可以将其更改为 javascript/jQuery 吗？

When the DT A is clicked -
  make THIS DT / DT A not clickable;
  When THIS DT / DT A is no longer expanded or visible -
  make THIS DT / DT A clickable;

感谢高峰。对不起，如果这是在某个地方发现的。我遇到的每篇文章都开始将这个微小的变化扩展为几行代码，无论是攻击 CSS，还是比似乎需要的 javascript/jQuery 更长，或者两者兼而有之。我只是真的想尽量保持它的包含和简单（如果可能的话）。

4

2 回答 2

2

您不想禁用单击（通过禁用锚点或取消绑定事件）。当前选择单击的元素时，您不希望执行操作。这样做：

$(document).ready(function() {
    var active = $("dd:first");
    $("dd").not(active).hide();
    $("dt a").click(function() {
        var dd = $(this).parent().next();
        if (! dd.is(active)) {
            active.slideUp("fast");
            active = dd.slideDown("fast");
        }
        return false;
    });
});
于 2013-01-16T20:09:50.227 回答
1

您可以向已单击的链接添加一个临时类，然后在事件触发的任何操作完成后将其删除。每次单击链接时使用 hasClass 测试该类，如果是，则不执行任何操作，如果不执行，则执行某些操作。我在这里回答了一个类似的问题：

暂时禁止 jQuery 事件处理

以下是它如何与您的代码一起使用（我相信，虽然可能需要修改以满足您的需要）：

$(document).ready(function() {
  $("dd:not(:first)").hide();
  $("dt a").click(function(e) {

    // Prevent link from doing default action
    e.preventDefault();

    if ($(this).hasClass('fired') == false) {

        // Add 'fired' class to disable link
        $(this).addClass('fired');

        // Do some stuff
        $("dd:visible").slideUp("fast");
        $(this).parent().next().slideDown("fast");

        // Remove 'fired' class to re-enable the link
        // You may need to do this in a call back function
        // If you are animating something
        $(this).removeClass('fired');

    }

    // Use preventDefault instead of this
    /*return false;*/
  });
});
于 2013-01-16T20:18:29.503 回答