使用jquery切換HTML和CSS

我正在尋找使用jQuery的一種切換按鈕來切換下面兩個狀態;使用jquery切換HTML和CSS

Toggle A

Toggle B

所以一切都在畫面A（紅色線以上）是隱藏的，當我點擊切換按鈕/鏈接，當我再次點擊切換按鈕，它會重新出現。

我一直在尋找Jquerys toggleClass功能;

$("button").click(function(){ 
$("p").toggleClass("main"); 
});

但是，我相信只會隱藏CSS，而不是HTML。我濫用這個功能，或者不是爲了這個嗎？

謝謝

來源

2012-07-05 Nathan

我真的不明白你所說的「隱藏的意思CSS，而不是HTML「說實話。它不隱藏任何東西，它只是添加或刪除（取決於匹配的元素是否已經有**類）匹配元素中的類。如果'.main'的CSS聲明包含'display：none'，那麼它會導致匹配的任何元素，並且給定該類，以使其不再可見。儘管如此，HTML和CSS仍然存在於DOM中。 – 2012-07-05 19:51:52

我使用的是沒有隱藏HTML的toggleclass，只是CSS。正如其他人的回答使用切換或slidetoggle做的伎倆。 – Nathan 2012-07-05 20:25:58

這裏是一個工作示例：

http://jsfiddle.net/pV7Qe/

<div class="header">header</div> 
<div class="menu"> 
    <div class="my-toggle">toggle</div> 
</div> 
<div class="content"> 
content    
</div> 

.header 
{ 
    background:lime; 
} 
.menu 
{ 
    height:100px; 
    background:gray;   
} 
.my-toggle 
{ 
    width:100px; 
    background:red; 
    cursor:pointer; 
} 
.content 
{ 
    height:500px;    
    background:#ddd; 
} 

$(".my-toggle").click(function() { 
    $(".header").slideToggle(); 
});

來源

2012-07-05 19:54:55 Lowkase

謝謝你的答案，選擇你的作爲滑動效果是一個很好的補充。真是令人印象深刻的jQuery迄今。 – Nathan 2012-07-05 20:26:45

嘗試使用切換功能。

$("idOfButton").click(function(){ 
    $(".main").toggle(); 
});

來源

2012-07-05 19:47:28 Sllix

使用切換功能，不帶任何參數..

$("button").click(function(){ 
$("p").toggleClass(); 
});

這應該工作。

來源

2012-07-05 19:48:08 Muthukumar

如果您可以將紅線上方的所有內容放入一個包含唯一ID的單個元素中，您可以簡單地在該單個元素上使用.toggle() jQuery函數來實現您想要的效果。

來源

2012-07-05 19:48:11

考慮兩類

.hide{visibility: hidden;} 
.show{visibility: visible;}

現在使用jQuery代碼

$("button").click(function(){ 
$("p").toggleClass('hide','show'); 
});

這將解決您的問題。

來源

2012-07-05 19:53:50

您可以使用slideToggle()，toggle()或

.hidden { 
    display: none; 
}

參考文獻：

來源

2012-07-05 19:58:58

沒有理由使用toggleClass並有一個隱藏的類額外的CSS。

只需使用toggle或slideToggle即可獲得更好的效果，這裏的每個人都有建議。

我只加了輸入將是代替

$('.buttons').click(function(){ 
    $('#div').slideToggle(); 
});

我相信這是更好的做法是「對」使用

$('.buttons').on('click', function(){ 
    $('#div').slideToggle(); 
});

來源

2012-07-05 20:04:53 mgaughan

使用jquery切換HTML和CSS

回答

相關問題