修改

Question

我的mvc 4项目中的.cshtml页面上有一个剃刀循环，我需要在这个剃刀循环中显示隐藏列表的子项。该代码适用于第一个元素，但不适用于其余元素。

.cshtml代码

<ol>
    @foreach (var Name in (List<string>)ViewData["Names"])
    {
        <li onclick="makevisible();" ondblclick="makeinvisible();">
            @Name
            <ul id="list" class="list">
                <li>childWichNeedsToBeHidden</li>
            </ul>
        </li>
    }
</ol>

我的javascript： function makevisible() {$('#list').show();} 和： function makeinvisible() {$('#list').hide();}

我的css：.list {display:none;}

修改

我新的.cshtml代码

    @{
      int i = 0;
      foreach (var Name in (List<string>)ViewData["Names"])
      {
          i++;
          <li onclick="makevisible();" ondblclick="makeinvisible();">
            @Name
             <ul class="list" id="@i">
                <li>childWichNeedsToBeHidden</li>
             </ul>
          </li>
      }
    }

所以现在每个ul都有一个唯一的id。但我不知道我的javascript应该是什么。我可以隐藏一个特定的孩子，就像第三个孩子一样：

        function makevisible() {
            $('#3').show();
        }
        function makeinvisible() {
            $('#3').hide();
        }

如何让＃3变成一个变量，以便我可以隐藏任何我想要的孩子？

Answer 1

你应该试试

function makevisible() {
    $(this).find('.list').show();
}

function makeinvisible() {
    $(this).find('.list').hide();
}

你不应该在foreach中使用相同的id。

Answer 2

<ol>
    @foreach (var Name in (List<string>)ViewData["Names"])
    {
        <li class="parentLI" onclick="makevisible();" ondblclick="makeinvisible();">
            @Name
            <ul class="list">
                <li>childWichNeedsToBeHidden</li>
            </ul>
        </li>
    }
</ol>

你的脚本应该是

<script type="text/javascript">
 $(function(){

  $(".parentLI").click(function(){
    $(this).closest("ul.list").hide();
});

});
</script>

以相同的方式绑定dblclick事件

使用javascript显示/隐藏<li>的子元素</li>

修改

2 个答案: