尝试在使用 if 语句按下一个链接时暂时禁用所有链接（即如果 div 介于 left:650px 和 0px 之间，则禁用所有链接）

Question

我试图在 jQuery 中声明以下内容：如果 'LinkedDiv1' 或 'LinkedDiv2' 或 'LinkedDiv3' 或 'LinkedDiv4' 中的任何一个在 left:0 和 left:650 之间，那么所有链接 ('Link1', ' Link2'、'Link3' 和 'Link4'）应关闭。

这样，一旦我按下任何一个链接，我就无法同时激活另一个链接。由于每个链接都会导致 div 从右侧（左侧：650 像素）移动到屏幕（左侧：0 像素）；这个想法是，如果任何 LinkedDiv 不是 650 像素或 0 像素，那是因为它必须在移动，因此已被相关链接激活。

我尝试了以下方法，但似乎不起作用：

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/

尽管对我的问题（目前我一次可以点击多个链接）暂时停用其他链接的任何更好的解决方案是可取的；看看我提出的解决方案为什么不起作用也会很有趣。

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 以 id 开头当前没有动画

  $("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/