Php 如何使用简单的CSS和Javascript隐藏其余内容_Php_Javascript_Jquery_Html_Css

Php 如何使用简单的CSS和Javascript隐藏其余内容

php javascript jquery html css

Php 如何使用简单的CSS和Javascript隐藏其余内容,php,javascript,jquery,html,css,Php,Javascript,Jquery,Html,Css,我的问题很简单。我希望一次只显示一个tr的内容。这意味着当我点击另一个tr时，另一个打开的tr应该关闭我的代码如下 <head> <style> p { width:400px; } .click{cursor:pointer;} </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

我的问题很简单。我希望一次只显示一个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>


p{宽度：400px；}
。单击{光标：指针；}
功能可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display==“无”）
e、 style.display='block'；
其他的
e、 style.display='none'；
}

上面是头部部分，onClick调用了一个名为visibility的函数。在下面的正文部分中，我试图显示两个使用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
 $(document).on('click', '.clickablerows', function() {
     $('.showablerows').css('display','none');
     var showee = $(this).data('showee');
     $(showee).css('display','table-row');
     return false;
 });

将单击
处理程序绑定到您的tr。单击
元素，显示相应的内容，隐藏其他内容：
$(this).next('tr').show().siblings().not('tr.click').hide();

我会添加/删除一个类，并通过该类处理可见性状态，这样您就可以更好地控制活动/非活动元素的情况（另外，您不必关心是否有一个同级元素是单击的元素）。您还可以使用.on（）
的事件委派来节省附加事件处理程序的时间

JS
var activeClass = 'active';

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

td {
    display: none;
}

.active td {
    display: table-cell;
}

CSS
var activeClass = 'active';

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

td {
    display: none;
}

.active td {
    display: table-cell;
}

所有td的第一组类名“test”
然后使用这个代码
$（“.test”）。单击（函数（）{
$（“.test”）.hide（）；
$（this.show（）
}))
 谢谢你的快速回复。你能给我举个小例子吗？每个循环有两行。。。你想显示的是…？假设我有两行，第一行和第二行。如果我点击1，它应该显示1的内容，当我点击2时，它应该显示2的内容。目前这件事发生得非常恰当。要隐藏以前打开的行，我必须单击该行。但是我想在我点击另一行的时候把它隐藏起来。这比我的解决方案要短得多：）嗨，Billyonecan，我来试试你的代码。我想这会给我带来我想要的结果。