0

クリックされたリンクに反応する折りたたみ可能なDIVを作成しようとしています。「次へ」を使用してこれを行う方法を見つけましたが、リンクを別の領域に配置したかったのです。私はこれがうまくいくことを思いついた... JSFiddle-作品

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; 
}
);​

私は今、同じ結果を作成しようとしていますが、リンクごとに1つではなく、1つの関数を使用しています。これが私が思いついたものです。

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-機能しません

エラーはないので、これは完全に間違っていると思います。私はJavascriptを使って約1週間しか働いていません。配列とJQueryイベントについて学んだことを取り入れて、ここでそれらを適用しようとしました。私はかなり離れていると思います。考え？ありがとう

4

2 に答える 2

2

試す：

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/

于 2012-12-05T22:33:34.730 に答える
2

navsLengthを定義するのを忘れただけです。

var navsLength=navs.length;

もちろん、jQueryを使用しているので、$（）。eachループに置き換えることもできます。

[更新]私が修正した他の2つのエラー：

lastOpen=navs[i];

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

デモ： http： //jsfiddle.net/jMzPJ/4/

于 2012-12-05T22:35:56.870 に答える