jquery faq for table_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-09 17:58 出处：网络

when i pressed a link all the td\'s are shown. how can i hide and show each td when pressed? <head>

相关专题：jquery

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