启用和禁用点击使用jQuery

Question

我有四个按钮，它具有可点击属性。点击按钮将使div滑落，并再次点击相同的div应该关闭div。我想补充的情况一样，当我打开一个div，三个按钮中的其余部分的点击属性应被禁用，我所做的是

for (var i = 1; i <= 4; i++) { 
    $(".slide" + i).click(function() { 
     var openTab = $(this).attr('class'); 
     openTab = openTab.replace('slide', ''); 
     var facetGroup = $(this).attr("key"); 
     if ($('#panel').is(':visible')) { 
      buttonCloser(openTab); 
     } else { 
      buttonOpener(openTab, facetGroup); 
     } 
    }); 
} 

function buttonCloser(m) { 
    for (var j = 1; j <= 4; j++) { 
     if (j != m) { 
      //alert(j); 
      $(".slide" + j).bind("click"); 
     } else { 
      $(".slide" + j).css({ 
       "background-color": " #fff5c3", 
       "color": "#000000" 
      }); 
     } 
    } 
    $("#panel").slideUp("slow"); 
} 

function buttonOpener(m, n) { 
    for (j = 1; j <= 4; j++) { 
     if (j != m) { 
      $(".slide" + j).unbind("click"); 
     } else { 
      $(".slide" + j).css({ 
       "background-color": "#293345", 
       "color": "#fff5c3" 
      }); 
     } 
    } 
    $("#panel").slideDown("slow"); 
    refreshFacet(n); 
} 

这段代码的问题是，我第一次通过点击滑块打开一个div，其他三个点击事件被禁用，当我关闭该div时，它将不能重新启用它的点击属性。所以它不会打开任何东西..

Answer 1

没有看到您的实际加价，我建议你用简单的jQuery，而不是“普通”的JavaScript和jQuery之间的混合和匹配：

var buttons = $('button[class^="slide"]'), 
    panel = $('#panel'); 

$(buttons).click(
    function() { 
     var that = $(this); 
     if (panel.is(':visible')) { 
      if (that.hasClass('opener')) { 
       panel.slideToggle(); 
       that.removeClass('opener'); 
      } 
      else { 
       return false; 
      } 
     } 
     else { 
      panel.slideToggle(); 
      that.addClass('opener'); 
     } 
    });​ 

JS Fiddle demo 。

---

参考文献：

• addClass()。
• attribute begins with selector attribute^="value" selector。
• hasClass()。
• removeClass()。
• slideToggle()。