Question

我还在学习javascript / jquery并遇到麻烦。我拉的每个帖子似乎都使这个过程过于复杂，除非它确实需要所有额外的代码。

这就是我正在做的事情：

使用滑动菜单和静态子菜单
使用带有DL，DT和DD的HTML（5）布局
导航菜单使用次要CSS进行样式设置
Nav菜单正在使用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或者两者兼而有之。我真的想尽量保持它的简单（如果可能的话）。

Answer 1

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

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

Answer 2

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

Suppress jQuery event handling temporarily

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

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

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

2 个答案: