javascript - 显示/隐藏 div (ASP.NET MVC)

Question

我正在编写 ASP.NET MVC web 应用程序并且有这样的屏幕。

Screen

我需要在点击“+​​”按钮时显示和隐藏div

据我所知，我可以通过 JS 通过 show() 和 hide() 方法来做到这一点。

或者我可以不用 JS 来做这个，也许你可以给我建议。

这是 View 中这个 block 的代码

 <div style="height: 80%; width: 100%; overflow: auto">
     <table style=" width: 100%;border-collapse: collapse; overflow: hidden;">
         @foreach (var item in Model)
         {   
              <tr>
                   <td style="padding-bottom: 0.5em;padding-top: 1em;">
                       <a href='@Url.Action("Edit", "Companies", new {id = item.QuestionId})'>
                           <img src='@Url.Content("~/Images/plus_plus.png")' />
                       </a>
                   </td>
                  
                   <td class="table_block" style="text-align: center; margin-left: 15px; margin-top: 15px;">
                       @Html.DisplayFor(modelItem => item.question)
                   </td>
                  
                   <td style=" padding-left: 5px;padding-bottom: 0.5em;padding-top: 1em;">
                  
                       <a href='@Url.Action("Edit", "Companies", new {id = item.QuestionId})'>
                           <img src='@Url.Content("~/Images/arrow.png")'/>
                       </a>
                      
                       <a href='@Url.Action("Edit", "Companies", new {id = item.QuestionId})'>
                           <img src='@Url.Content("~/Images/Edit.png")'/>
                       </a>
                      
                       <a href='@Url.Action("Delete", "Companies", new {id = item.QuestionId})'>
                           <img src='@Url.Content("~/Images/Delete.png")'/>
                       </a>
                      
                   </td>
               </tr>
          }   
    </table>

更新

我找到了如何执行此操作，但是当我尝试隐藏/显示表格中的所有 block 时，隐藏或显示。

如何只对一个特定元素执行此操作？

更新 2

我尝试@William Robinson 解决方案并编写这样的代码

这是脚本

    <script type="text/javascript" src="~/scripts/jquery-3.1.1.js">
    $('.title').on('click', function () {
        $(this).next().toggle();
    });
</script>

这是我需要显示\隐藏的 block

 <td class="title" >
    <img  src='@Url.Content("~/Images/plus_plus.png")' />
         <div class="content">
             <b>Test</b>
         </div>
 </td>

但是当我点击时什么也没有显示。

我的错误在哪里？

更新 3

我找到了解决方案。只需要在脚本之前写这个 @Scripts.Render("~/bundles/jquery")

Answer 1

如果您使用 jQuery，这将非常简单，这里是一个 jsFiddle

$('.title').on('click',function(){
    $(this).next().toggle();
});