Question

我的老问题：One Page fadeIn & fadeOut Transition Logic

代码工作得很好，但我有一个问题。在我的导航系统中有菜单的子菜单，也就是下拉菜单。因此，如果单击菜单链接时没有内容，但是子菜单，则内容页面将被加载为空白，直到我点击实际具有内容类的内容。

这是一个简单的jsFiddle示例：http://jsfiddle.net/QuKhN/1/

我希望它只在有与菜单链接ID对应的内容时加载内容。因此，如果在此示例中单击“联系我们”，我不希望它尝试加载一个名为“contactus content”的不存在的div。

这可能吗？我用hasClass（）函数尝试过一些东西，但是我没能成功。

感谢您花时间阅读和理解。

Answer 1

您可以选择要显示的元素，并使用length属性确保存在这样的元素。长度将大于零。

这样的事情：

$("ul li a ").click(function(){
    var cls = $(this).attr('id');
    // Fade out the previous content no matter what
    $(".content").fadeOut(500);
    // Check if there is content to display using length
    if ($('.' + cls).length > 0) {
       // Will only display content if it exist
       $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
});

以下是一个工作示例：http://jsfiddle.net/QuKhN/2/

注意：

这依赖于你不在其他一些元素上使用这些类，但是你的脚本的其余部分也是如此，所以我想在这种情况下会没用。

Answer 2

尝试hasClass：

$("ul li a ").click(function(){
    var cls = $(this).attr('id')
    $(".content").fadeOut(500);
    if($("div").hasClass(cls)){
       $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})

Answer 3

你可以试试这个：

$("ul li a ").click(function() {
    var cls = $(this).attr('id')
    if ($('div.content.' + cls).length > 0) {  
        $(".content").fadeOut(500);
        $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})

DEMO

Answer 4

$("ul li a").filter(function(){
    return $('.'+this.id).length>0;
}).click(function(){
    var cls = $(this).attr('id')

    $(".content").fadeOut(500);
    $('.' + cls).delay(500).fadeIn(1000);
    return false;
})

DEMO

点击＆amp;仅在存在div类时显示

4 个答案: