Question

我正在尝试创建可折叠的DIV，以响应被点击的链接。我找到了如何使用＆＃34; next＆＃34;但我想把链接放在一个单独的区域。我想出了这个有效的...... JSFiddle - Works

function navLink(classs) {
this.classs = classs; 
} 

var homeLink = new navLink(".content-home");
var aboutLink = new navLink(".content-about");
var contactLink = new navLink(".content-contact"); 
var lastOpen = null;


$('.home').click(function() {
 if(lastOpen !== null) {
     if(lastOpen === homeLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
 }
   $('.content-home').slideToggle('slow'); 
        lastOpen = homeLink; 
} 
); 


$('.about').click(function() {
if(lastOpen !== null) {
     if(lastOpen === aboutLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
}
   $('.content-about').slideToggle('slow'); 
        lastOpen = aboutLink; 
} 
);  

$('.contact').click(function() {
if(lastOpen !== null) {
     if(lastOpen === contactLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
}
   $('.content-contact').slideToggle('slow'); 
        lastOpen = contactLink; 
}
);

我现在正在尝试创建相同的结果，但每个链接使用一个函数而不是一个函数。这就是我想出的......

function navLink(contentClass, linkClass, linkId) {
this.contentClass = contentClass;
this.linkClass = linkClass;
this.linkId = linkId;
}

var navs = [];

navs[0] = new navLink(".content-home", "nav", "home");
navs[1] = new navLink(".content-about", "nav", "about");
navs[2] = new navLink(".content-contact", "nav", "contact");

var lastOpen = null;

$('.nav').click(function(event) {

//loop through link objects
var i;
for (i = 0; i < (navsLength + 1); i++) {

    //find link object that matches link clicked
    if (event.target.id === navs[i].linkId) {

        //if there is a window opened, close it 
        if (lastOpen !== null) {
            //unless it is the link that was clicked
            if (lastOpen === navs[i]) {
                return;
            } else {
                //close it
                $(lastOpen.contentClass).slideToggle('fast');
            }
        }

        //open the content that correlates to the link clicked
        $(navs[i].contentClass).slideToggle('slow');

        navs[i] = lastOpen;


    }
 }
 });

JSFiddle - Doesn't Work

没有错误所以我认为我只是做错了。我现在只使用Javascript一周左右。我已经了解了我对数组和JQuery事件的了解，并尝试在这里应用它们。我想我离开了。思考？感谢

Answer 1

尝试：

var current, show = function(){
    var id = this.id,
        doShow = function() {
           current = id;
           $(".content-" + id).slideToggle('slow');           
        },
        toHide = current && ".content-" + current;

    if(current === id){  //Same link.
        return;   
    }

    toHide ? $(toHide).slideToggle('fast', doShow): doShow();;

};

$("#nav").on("click", ".nav", show);

http://jsfiddle.net/tarabyte/jMzPJ/5/

Answer 2

你忘了定义navsLength：

var navsLength=navs.length;

当然，你也可以用$（）。每个循环替换它，因为你正在使用jQuery。

[更新]我纠正了另外两个错误：

lastOpen=navs[i];

for(i=0; i < navsLength ; i++)

演示：http://jsfiddle.net/jMzPJ/4/

使用HTML类目标的Javascript事件 - 1 Me - 0

2 个答案: