jQuery切換（）動畫時，我不想要它？

我有三個ID爲「albums」，「about」和「contact」的元素，還有三個鏈接通過toggle（）函數顯示/隱藏它們，ID爲「togglealbums」，「toggleabout」和「 togglecontact」。我只希望這些元素之一，能夠在任何時間可以看出，所以我寫了下面的功能：jQuery切換（）動畫時，我不想要它？

$('#togglealbums').click(function() { 
    if($('#about').is(':visible')) { 
    $('#about').toggle(function() { 
     $('#albums').toggle(); 
    }); 
    } else if($('#contact').is(':visible')) { 
    $('#contact').toggle(function() { 
     $('#albums').toggle(); 
    }); 
    } else { 
    $('#albums').toggle(); 
    } 
}); 

$('#toggleabout').click(function() { 
    if($('#albums').is(':visible')) { 
    $('#albums').toggle(function() { 
     $('#about').toggle(); 
    }); 
    } else if($('#contact').is(':visible')) { 
    $('#contact').toggle(function() { 
     $('#about').toggle(); 
    }); 
    } else { 
    $('#about').toggle(); 
    } 
}); 

$('#togglecontact').click(function() { 
    if($('#albums').is(':visible')) { 
    $('#albums').toggle(function() { 
     $('#contact').toggle(); 
    }); 
    } else if($('#about').is(':visible')) { 
    $('#about').toggle(function() { 
     $('#contact').toggle(); 
    }); 
    } else { 
    $('#contact').toggle(); 
    } 
});

首先，如果這些是瘋狂低效甚至還有一個更簡單的方法來做到這一點，請告訴我。

我發現的是，如果三個DIV都不可見，單擊其中一個切換鏈接將顯示/隱藏各個不帶動畫的div。但是，如果其中一個DIV可見，則單擊另一個切換鏈接將導致div縮小並淡入淡出，並且新的DIV將展開並淡入，這是我不想要的（至少現在是這樣）。這可以在這裏看到：http://new.e17.paca.arvixe.com。

有誰能告訴我爲什麼會發生這種情況？

謝謝！

編輯：

標記是在這裏：

<body> 
    <div id="main"> 
    <div id="nav"> 
     <div id="menu"> 
     <ul> 
      <li><a href="#" id="togglealbums">Albums</a></li> 
      <li><a href="#" id="toggleabout">About Me</a></li> 
      <li><a href="#" id="togglecontact">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    <div id="albums"> 
     Albums go here 
    </div> 
    <div id="about"> 
     About info goes here 
    </div> 
    <div id="contact"> 
     Contact info goes here 
    </div> 
    </div> 
</body>

來源

2012-10-30 NaOH

你的收縮和褪色發生的事情，因爲如果.toggle()給出一個回調函數，它假設你想動畫切換，而不是隻打開/關閉它。（據the docs，截至記者發稿，這是隻應該在你提供的持續時間。我已經提交了關於這個bug報告的情況發生。）

對於這個減少的例子見http://jsfiddle.net/mblase75/byKeP/1/。要解決它，只需刪除回調，並將相同的代碼放在函數的下一行。

至於簡化你的代碼，類是你的朋友。 HTML：

<a href="#" class="togglelink" data-block="albums" id="togglealbums">toggle albums</a> 
<a href="#" class="togglelink" data-block="about" id="toggleabout">toggle about</a> 
<a href="#" class="togglelink" data-block="contact" id="togglecontact">toggle contact</a> 

<div class="toggleblock" id="albums">ALBUMS</div> 
<div class="toggleblock" id="about">ABOUT</div> 
<div class="toggleblock" id="contact">CONTACT</div>

注意data-屬性，jQuery將解析，並通過.data()方法訪問。這使得在超鏈接本身上存儲唯一的div ID變得容易，這反過來又極大地簡化了我們的JavaScript。 JS：

$('.togglelink').on('click',function(e) { 
    var id = $(this).data('block'); 
    $('#'+id).toggle().siblings('.toggleblock').hide(); 
});

http://jsfiddle.net/mblase75/byKeP/

來源

2012-10-30 18:11:46 Blazemonger

非常感謝！太棒了！ – NaOH

更新：[已更新'toggle（）'文檔]（https://github.com/jquery/api.jquery.com/issues/167）來反映此問題。 – Blazemonger

jQuery切換（）動畫時，我不想要它？

回答

相關問題