如何使用简单的CSS和Javascript隐藏其余的内容 - How to hide the rest of the contents using simple CSS and Javascript

How to hide the rest of the contents using simple CSS and Javascript

我的问题很简单。我想一次只显示一个tr的内容。这意味着当我点击另一个tr时，另一个打开的tr应该关闭。

我的代码如下

<head>
    <style>
      p { width:400px; }
      .click{cursor:pointer;}
    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    function visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'none')
          e.style.display = 'block';
        else
          e.style.display = 'none';
    }
    </script>
</head>

上面是头部部分，其中onClick函数称为可见性被调用。在下面的body部分中，我试图使用for循环显示两个tr。

<body>
<table>
<?php
$i=2;
for($i = 1; $i <= 2; $i++)
{
?>
    <tr class="click <?php echo $i; ?>" onClick="visibility('<?php echo $i; ?>');">
        <td>Click <?php echo $i; ?></td>
    </tr>
    <tr id="<?php echo $i; ?>" style="display:none;">
        <td>This is a paragraph <?php echo $i; ?></td>
    </tr>
<?php
}
?>
</table>
</body>

我无法得到期望的结果(这意味着一次只有一个tr应该是可见的)。有许多现有的Jquery插件可用，但我不想使用它们，因为它会增加我的网页上的负载，这么多的定制将需要。我几乎完成了，并希望得到所需的结果与您所有的帮助。提前感谢

将click处理程序绑定到tr.click元素，显示相应的内容，并隐藏其他元素:

$(this).next('tr').show().siblings().not('tr.click').hide();

Here's fiddle

显示"tr"元素时需要设置显示为table-row值。让我们使用jQuery。

 $(document).on('click', '.clickablerows', function() {
     $('.showablerows').css('display','none');
     var showee = $(this).data('showee');
     $(showee).css('display','table-row');
     return false;
 });

我会添加/删除一个类，并通过它来处理可见性状态，这样您就可以更好地控制活动/非活动元素发生的事情(另外，您不必关心兄弟元素中的一个是否是单击的元素)。您还可以使用.on()的事件委托来节省一些附加事件处理程序的时间。

jsfiddle

var activeClass = 'active';
$('table').on('click', '.click', function() {
   $(this).next().addClass(activeClass).siblings().removeClass(activeClass);
});

CSS

td {
    display: none;
}
.active td {
    display: table-cell;
}

第一个为所有td设置类名"test"

则使用此代码

$ (" test ") .click(函数(){

$ (" test ") hide ();(美元),告诉();

});