如何暫時禁用使用jQuery的導航鏈接

Question

我仍然學習了一點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; 
    }); 
}); 

我試着綁定和一個幾件事情，但由於我的寫作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;*/ 
    }); 
});