尝试暂时禁用所有链接，当一个链接按下使用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/