在桌行的掠夺者与css选择器

Question

我正在尝试创建一个允许在单击行时获取子信息的表，我得到了以下代码，但我无法使子信息彼此分开显示

#spoiler, #close {
    display: none;
}
#show:target #spoiler {
    display: table-row;
}
#show:target #open {
    display: none;
}
#show:target #close {
    display: block;
}

<div id="show">
    <table>
    <tr>
        <td> <a href="#show" id="open" class="trigger open">Company 1</a>
             <a href="#hide" id="close" class="trigger close">Company 1</a></td>
    </tr>
    <tr>
         <td id="spoiler" class="spoiler">Company 1 Information</td>
    </tr>
    <tr>
        <td> <a href="#show" id="open" class="trigger open">Company 2</a>
             <a href="#hide" id="close" class="trigger close">Company 2</a>         </td>
    </tr>
     <tr>
         <td id="spoiler" class="spoiler">Company 2 Information</td>
    </tr>
</table>
</div>

Answer 1

您对多个元素使用相同的ID。你应该将他们的身份彼此分开，这将解决你的问题。

Answer 2

[HttpPost]
public ActionResult Index(IndexViewModel model)
{
    var selectedNumber= model.SelectedEmployeeId; 
    return View();
}

使用javascript更好，更轻松。