如何使用jquery滑動切換類？

我已使用http://w3schools.com的以下代碼。但在這個我只能使用一次。我想多次使用它，因爲我想在HTML 中創建FAQ面板，但它來自ID，我只能使用它一次。如何使用jquery滑動切換類？

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); 
    }); 
}); 
</script> 

<style type="text/css"> 
#panel,#flip 
{ 
padding:5px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
#panel 
{ 
padding:50px; 
display:none; 
} 
</style> 
</head> 
<body> 

<div id="flip">Click to slide the panel down or up</div> 
<div id="panel">Hello world!</div> 

</body> 
</html>

來源

2013-11-01 Vikash Shandilya

使用類名稱，而不是ID的 –

demo

腳本：

$(function(){ 
    $('a.toggle').click(function(){ 
     $('.myContent').stop().slideToggle(500); 
     return false; 
    }); 

});

HTML

<a href="#" style="background-color: #99CCFF; padding: 5px 10px;" class="toggle">CLICK</a> 

<div> 
    <div class="myContent" style="background-color: #99CCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery. 
    </div> 

    <div class="myContent" style="background-color: #CCCCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery. 
    </div> 
</div>

來源

2013-11-01 07:49:11 Ashish

變化id到class，然後我們在CSS和jQuery E級選擇

<div class="flip">Click to slide the panel down or up</div> 
<div class="panel">Hello world!</div> 
<div class="flip">Click to slide the panel down or up</div> 
<div class="panel">Hello world!</div> 
<div class="flip">Click to slide the panel down or up</div> 
<div class="panel">Hello world!</div>

CSS

.panel, .flip { 
    padding:5px; 
    text-align:center; 
    background-color:#e5eecc; 
    border:solid 1px #c3c3c3; 
} 
.panel { 
    padding:50px; 
    display:none; 
}

然後

$(document).ready(function() { 
    $(".flip").click(function() { 
     $(this).next('.panel').slideToggle("slow"); 
    }); 
});

演示：Fiddle

來源

2013-11-01 07:49:30

感謝阿倫P Johny.I已經使用它和它對我來說工作得很好。 –

如何使用jquery滑動切換類？

回答

相關問題