jquery faq for table
when i pressed a link all the td's are shown. how can i hide and show each td when pressed?
<head>
<style type="text/css">
.details{display:none;}
</style>
<script type="text/javascript">
$().ready(function() {
$('a.buy').click(function() {
$('.details').slideToggle('fast', function() {
});
});
});
</script>
<body>
<table>
<tr>
<td> <a class="buy" href="#">more details</a> </td>
</tr>
<tr>
<td class="details">text 1 text 1 text 1 text 1 </td>
</tr>
<tr>
<td> <a class="buy" href="#">more details&l开发者_如何学JAVAt;/a> </td>
</tr>
<tr>
<td class="details">text 2 text 2 text 2 text 2 </td>
</tr>
<tr>
<td> <a class="buy" href="#">more details</a> </td>
</tr>
<tr>
<td class="details">text 3 text 3 text 3 text 3 </td>
</tr>
</table>
</body>
</html>
$('.details') addresses all cells with this class. You must specifically target the one you want:
$(this) // <-- this is the currently clicked link
.closest('tr') // <-- go up until the next tr
.next() // <-- next tr
.find('td.details').show(); // <-- show the cell there
If you want to hide all others, you can simply hide all before showing the one you want:
$('.details').hide();
// then the above
This is not particularly performant, but it gets the job done.
You can make use of .closest() and .find() jquery functions to achieve this. Here is the working example in jsfiddle
Use <dl> <dt> <dd> in HTML ( best fit )
HTML
<dl class="faq">
<span style="font-size: 14px; ">
<span class="Apple-style-span" style="font-family: Verdana, Geneva, sans-serif; ">
<dt><span style="color: rgb(10, 171, 253); ">Question?</dt>
<dd>Answer.<a class="close" href="#">Close Text</a></dd>
</span>
</span>
</dl>
jQuery
$('.faq dd').hide();
$('.faq dt').click(function(){
$(this).next('dd').slideToggle('slow');
});
$('a.close').click(function (){ $(this).parent('dd').slideUp('slow'); });
加载中,请稍侯......
精彩评论