Question

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

当我点击“+”按钮

时，我需要显示和隐藏div

据我所知，我可以通过ggplot(data = cabbages, aes(x = Cult, y = HeadWt, colour = Cult, fill = Cult)) + geom_jitter(alpha = 0.4, position = pos_1) + stat_summary(aes(x = as.numeric(Cult) + 0.2), fun.y = "mean", geom = "point", size = 3) + stat_summary(aes(x = as.numeric(Cult) + 0.2), fun.data = "mean_cl_normal", geom = "errorbar", width = 0.05, lwd = 1, fun.args = list(conf.int = 0.95)) + theme_bw()和show()方法通过JS来做到这一点。

或者我可以在没有JS的情况下这样做，也许你可以给我建议。

以下是View

中此块的代码

hide()

更新

我找到了如何做到这一点，但当我试图隐藏/显示表隐藏或显示中的所有块时。

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

UPDATE2

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

这是脚本

 <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>

这是我要显示的块\ hide

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

但是当我点击时，没有任何东西显示出来。

我的错误在哪里？

UPDATE3

我找到了解决方案。只需要在脚本<td class="title" > <img src='@Url.Content("~/Images/plus_plus.png")' /> <div class="content"> <b>Test</b> </div> </td>

之前编写

Answer 1

如果你使用的是jQuery，这很简单，这里是jsFiddle

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

Answer 2

基于：src

.collapse{
  cursor: pointer;
  display: block;
 
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}

<table>
    <tr>
        <td>
            <label class="collapse" for="_1">+</label>
            <input id="_1" type="checkbox"> 
            <div>Content 1</div>
        </td>
     </tr>
     <tr>
        <td>
            <label class="collapse" for="_2">+</label>
            <input id="_2" type="checkbox">
            <div>Content 2</div>
        </td>
     </tr>
</table>

显示/隐藏div（ASP.NET MVC）

2 个答案: