jquery - 当使用 if 语句按下一个链接时，尝试暂时禁用所有链接(即如果左侧 :650px and 0px, 之间的 div 禁用所有链接)

Question

我试图在 jQuery 中声明以下内容:如果“LinkedDiv1”或“LinkedDiv2”或“LinkedDiv3”或“LinkedDiv4”中的任何一个位于 left:0 和 left:650 之间，则所有链接(“Link1”、“Link2'、'Link3' 和 'Link4') 应该关闭。

这样一来，一旦我按下任何一个链接，我就无法同时激活另一个链接。由于每个链接都会导致一个 div 从右侧(左:650 像素)移动到屏幕上(左:0 像素)；这个想法是，如果任何 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'); 
    } 

这是代码的 fiddle (LinkedDiv1 对应于#rightContentService；LinkedDiv2 对应于#rightContentSweaters；LinkedDiv3 对应于#rightContentContact；LinkedDiv4 对应于#rightContentSeamstress)-

全屏:https://jsfiddle.net/8eah0fvm/1/embedded/result/ fiddle :https://jsfiddle.net/8eah0fvm/1/

虽然暂时停用其他链接对我的问题(目前我可以一次按下多个链接)有任何更好的解决方案是更可取的；看看为什么我提出的解决方案不起作用也会很有趣。

Answer 1

我还将您的功能缩减为一个可重复使用的功能，但它需要向您的导航元素添加一些数据属性，并向您的内容容器添加一些类。通过取消绑定(bind)和重新绑定(bind)点击事件处理程序，您可以避免在动画期间点击导致问题。 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); ;
}