javascript - 如何使用 jQuery 暂时禁用导航链接

Question

我仍在学习一些关于 javascript/jquery 的知识，并且遇到了障碍。我拉的每一篇文章似乎都使过程变得过于复杂，除非它确实需要所有额外的代码。

这就是我正在做的事情:

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

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

导航菜单的 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 或两者都需要的代码更长。我只是想尽量保持它的包容性和简单性(如果可能的话)。

Answer 1

您不想禁用单击(通过禁用 anchor 或取消绑定(bind)事件)。当当前选择了单击的元素时，您不希望执行操作。这样做:

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