0

最终，我试图使链接在按下并调出相关 div 后不起作用（当相关 div 未显示时，我希望链接再次起作用）。页面不会重新加载，因为链接只会更改 div 显示的内容。

我有四个链接（“linkSweaters”、“linkService”、“linkContact”和“linkSeamstress”）对应于四个 div（“rightContentSweaters”、“rightContentService”、“rightContentContact”和“rightContentSeamstress”）。在任何时候，只应显示一个 div，而所有其他 div 应为 css:'display:none'。我还有一个'rightContentSpacer' div，当我单击任何一个链接时，它的高度会增加 - 从而重叠当时显示的 div，一旦重叠，我就可以消失 - 然后再次缩小以发现与推送的链接相对应的 div（当“rightContentSpacer”与前一个 div 重叠时，我会显示该链接，从而实现从一个 div 到另一个 div 的转换）。

我的问题：当我点击一个链接（例如'linkSweaters'）时，我不想点击同一个链接随后激活jQuery动画，因为相关的div已经显示（即'rightContentSweaters'） - 即当'rightContentSweaters ' 显示我希望“linkSweaters”链接在单击时不执行任何操作。

如下所示（就在下面的 jQuery 代码的底部），为了让点击链接什么都不做，我试过 ' $("#linkSweaters").noop();'; 这取决于其他三个 div（'rightContentService'、'rightContentContact' 和 'rightContentSeamstress'）不显示即 css：'display:none'。这个想法是，如果其他三个 div 没有显示，那么这意味着（因为任何时候都必须显示一个 div）必须显示“rightContentSweaters”。

尽管如此，在我原来的 CSS 中，当页面最初加载时，三个 div（'rightContentSweaters'、'rightContentSeamstress' 和 'rightContentContact'）以 'display:none' 开头；一个 div ('rightContentService') 不会以 'display:none' 开始，因为它已经显示：

#rightContentService {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:block;
                }

 #rightContentSweaters {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:none;
                }

因此，为什么我在底部添加了一点 jQuery 代码（即具有延迟功能的位），这样一旦我点击了与原始页面不同的链接，'rightContentService' 就变成了 'display:none'；然后所有三个 div 的条件都是“显示：无”将起作用。

我的jQuery如下：

$("#linkSweaters").click(function(){
    if ($('#rightContentService').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none'){
    $("#rightContentSpacer").animate({
        height: "100%",
        },1000);
    $("#rightContentContact").animate({
        height: "0",
        },1000);
    $("#rightContentContact").hide({
        });
    $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
        });
    $("#rightContentSpacer").delay(1000).animate({
        height: "10%",
        },1000);

} else if ($('#rightContentService').css('display') == 'none' && $('#rightContentContact').css('display') == 'none'){
    $("#rightContentSpacer").animate({
        height: "100%",
        },1000);
    $("#rightContentSeamstress").animate({
        height: "0",
        },1000);
    $("#rightContentSeamstress").hide({
        });
    $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
        });
    $("#rightContentSpacer").delay(1000).animate({
        height: "10%",
        },1000);

} else if ($('#rightContentContact').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none'){
    $("#rightContentSpacer").animate({
        height: "100%",
        },1000);
    $("#rightContentService").animate({
        height: "0",
        },1000);
    $("#rightContentService").hide({
        });
    $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
        });
    $("#rightContentSpacer").delay(1000).animate({
       height: "10%",
       },1000);

} else if ($('#rightContentContact').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none' && $('#rightContentService').css('display') == 'none'){
    $("#linkSweaters").noop();

    }

$('#rightContentService').delay(1000).queue(function (next) { 
    $(this).css('display', 'none'); 
    next(); 
    });

});

它不起作用 - 在已经显示“rightContentSweaters”的情况下单击“linkSweaters”后，我仍然可以单击它。所以看起来要么（A）'noop'不起作用，要么（B）我的三条件（x && y && z）不起作用。

你怎么看？

4

1 回答 1

1

这不是该noop方法的作用。它所做的实际上是完全没有的。

该noop方法旨在用于需要调用函数的地方，但调用该函数不应该做任何事情。而不是创建一个新的空函数，即function(){}你可以只使用$.noop.

如果要从元素中移除 click 事件处理程序，可以使用以下off方法：

$("#linkSweaters").off('click');
于 2015-10-14T20:22:29.250 回答