Question

最初我以为我想在我的桌子上实现可折叠的行，但我认为自从间距和边距以来我们真的没有工作......所以我想到了它并意识到我真正想做的就是隐藏和显示点击信息。

以下是我使用的实际代码的示例：

＆＃13;

.isaaccrm {
    
    float: left;
    height: 20px;
    width: 100px;
    }

    .zoho {
    
    height: 50px;
    width: 115px;
    padding-top: 10px;
    float: right;
    margin-right: 30px;
    
    }

    .salesforce {
    
    height: 60px;
    width: 90px;
    padding-top: 10px;
    padding-left: 20px;
    }

    .infusionsoft {
    
    height: 25px;
    width: 180px;
    padding-top: 5px;
    }

    .sugarcrm {
    
    height: 60px;
    width: 90px;
    padding-top: 10px;
    margin-right: 55px;
    float: right;
    }

    .comparisons {
    
    margin-top: 30px;
    margin-bottom: 30px;
    /* Make the comparison font into Lato*/
    
    }

    .center {
    
    text-align:center;
    
    }

＆＃13;

<head>

</head>

<body>

    <table>
        <tr>
            <th></th>
            <th><img class="isaaccrm" src="http://isaacintelligence.com/wp-content/uploads/2017/04/ISAAC-logo-cropped.png"/></th>
            <th><img class="zoho" src="http://i.imgur.com/R8vz9iG.png"/></th>
            <th><img class="salesforce" src="http://i.imgur.com/UhUHB4P.png"/></th>
            <th><img class="infusionsoft" src="http://i.imgur.com/iGzEnUr.png"/> </th>
            <th><img class="sugarcrm" src="http://i.imgur.com/weilyrP.png"/></th>
        </tr>

        <tr>
            <th> <p class="comparisons">Operating Systems</p>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
            </th>
        </tr>

    </table>

</body>

＆＃13;

这就是我网站上的样子：

操作系统是一行，我只是希望能够隐藏内部数据，同时保持左侧的名称可见，然后单击，显示该信息（并且循环继续）。当我说＆＃34;隐藏＆＃34;那个数据，我的意思是我希望行像收缩一样收缩，然后展开并在点击时显示数据。

这种东西有功能吗？

非常感谢任何帮助

Answer 1

你可以尝试隐藏.center然后在.comparisons上显示它们点击
所以，在CSS中

.center{display:none;}

然后在JS

$('.comparisons').on('click', function(e) {
  e.preventDefault;
  $('.center').toggle();
});

希望这有助于（不在移动设备上解释很多）SYA
这是一个fiddle

什么是在表格中隐藏/显示这些行的最佳解决方案？

1 个答案: