嘗試暫時禁用所有鏈接，當一個鏈接按下使用if語句（即如果div之間左：650px和0px，禁用所有鏈接）

Question

我想在jQuery中聲明以下內容：如果任何'LinkedDiv1'或'LinkedDiv2 '或'LinkedDiv3'或'LinkedDiv4'位於left：0和left：650之間，則所有鏈接（'Link1'，'Link2'，'Link3'和'Link4'）都應關閉。

這是因爲一旦我按任何一個鏈接，我就不能再同時激活另一個鏈接。由於每個鏈接都會導致div從右側（左側：650px）移動到屏幕上（左側：0px）;想法是，如果任何LinkedDiv不是650px或0px，那是因爲它必須移動，因此已被相關鏈接激活。

我曾嘗試以下，但它似乎並沒有工作：

if (!$('#linkedDiv1').css('left') == '0px' && !$('#linkedDiv1').css('left') == '650px'){ 
    $(".links").off('click'); 
    } 

else if (!$('#linkedDiv2').css('left') == '0px' && !$('#linkedDiv2').css('left') == '650px'){ 
    $(".links").off('click'); 
    } 

else if (!$('#linkedDiv3').css('left') == '0px' && !$('#linkedDiv3').css('left') == '650px'){ 
    $(".links").off('click'); 
    } 

else if (!$('#linkedDiv4').css('left') == '0px' && !$('#LinkedDiv4').css('left') == '650px'){ 
    $(".links").off('click'); 
    } 

這裏是代碼中的小提琴（LinkedDiv1相當於#rightContentService; LinkedDiv2到#rightContentSweaters; LinkedDiv3到#rightContentContact; LinkedDiv4到#rightContentSeamstress） -

全屏：https://jsfiddle.net/8eah0fvm/1/embedded/result/ 小提琴：https://jsfiddle.net/8eah0fvm/1/

雖然我的問題沒有更好的辦法（在第m我可以一次按多個鏈接）暫時停用其他鏈接是最好的;看到爲什麼我提出的解決方案不起作用也很有趣。

Answer 1

我也將功能簡化爲單個可重用功能，但它需要嚮導航元素和類添加一些數據屬性到您的內容容器。通過解除綁定和重新綁定單擊事件處理程序，您可以避免在動畫導致問題時進行單擊。 https://jsfiddle.net/8eah0fvm/4/

HTML：

<div id="wrapper"> 
     <div id="leftMenuBar"> 
      <div id="leftLogo"> 
       <p> 
        </br>MENDICATION CORPORATION</p> 
       <p id="smallerText">Mendicants of fashion</p> 
      </div> 
      <div class="break"></div> 
      <div id="leftLinks"> 
       <ul> 
        <li id="linkService" data-show="rightContentService" class="links">the SERVICE</li> 
        <li id="linkSweaters" data-show="rightContentSweaters" class="links">the SWEATERS</li> 
        <li id="linkSeamstress" data-show="rightContentSeamstress" class="links">the SEAMSTRESS</li> 
        <li id="linkContact" data-show="rightContentContact" class="links">CONTACT</li> 
       </ul> 
      </div> 
      <div id="leftSpace"></div> 
      <div id="leftCopyrightAndSocialMedia"></div> 
     </div> 


     <div id="rightContent"> 



      <div id="rightContentService" class="content-box"> 
      <h1>the SERVICE</h1>  
      </div> 

      <div id="rightContentSweaters" class="content-box"> 
       <h1>the SWEATERS</h1> 
      </div> 

      <div id="rightContentSeamstress" class="content-box"> 
       <h1>the SEAMSTRESS</h1> 
       </div> 

      <div id="rightContentContact" class="content-box"> 
       <h1>CONTACT</h1> 
       </div> 


     </div> 

    </div> 

的Javascript：

$(function(){ 
    $("#leftLinks li").bind('click', this, changeContent); 
}); 

function changeContent(el){ 
    $("#leftLinks li").unbind('click', changeContent); 
    var id = $(this).data('show'); 
    var $elem = $('#' + id); 
    var shown = $('.content-box').filter(function(i, el){ 
     return $(el).position().left < 650; 
    })[0]; 
    $(shown).animate({ left: "650px"}, 1000); 
    $elem.delay(1000).animate({ left: '0px'}, 1000); 
    setTimeout(function(){$('#leftLinks li').bind('click', this, changeContent)}, 2000); ; 
} 

Answer 2

儘量減少對單click處理器，採用選擇$("li[id]")，.is()與:animated選擇調用.animate()如果div元素與id與"rightContent"開始是沒有被動畫

$("li[id]").click(function() { 
    var id = this.id.replace(/link/, "") 
    , elems = $("div[id^=rightContent]"); 
    if (!elems.is(":animated")) { 
     elems 
     .filter(function (i, el) { 
      return $(el).css("left") === "0px" && !new RegExp(id).test(el.id) 
     }) 
     .animate({ 
      left: 650 
     }, 1000) 
     .siblings("[id$=" + id + "]") 
     .delay(1000) 
     .animate({ 
      left: "0px", 
     }, 1000) 
    } 
    }) 

的jsfiddle沒有.delay(1000)https://jsfiddle.net/8eah0fvm/5/，https://jsfiddle.net/8eah0fvm/5/embedded/result/

與.delay(1000)https://jsfiddle.net/8eah0fvm/6/