在 ASP.Net MVC 中，如何在单击时显示和隐藏 3 个 @Html.ActionLink 按钮？答案

【问题标题】：Within ASP.Net MVC, how do I show and hide 3 @Html.ActionLink buttons on click?在 ASP.Net MVC 中，如何在单击时显示和隐藏 3 个 @Html.ActionLink 按钮？
【发布时间】：2014-12-10 08:48:33
【问题描述】：

在 ASP.Net MVC 中，如何在点击时显示和隐藏 3 个 @Html.ActionLink 按钮？

基本上，我正在尝试对网站的移动端进行编码，但我的网页 6 @Html.ActionLink 按钮，我不希望这些按钮填满整个页面，所以我想要的是当网页检测到移动设备正在查看网站 (@media screen and (max-width: 480px)) 最后 3 个按钮被隐藏，并且会出现一个名为 more 的按钮。

点击这个新按钮将显示最后 3 个按钮，再次点击时将隐藏它们。

我以前没有这样做过，但我的尝试如下：

$(function() {
  $("#more").on('click', function() {
    var buttons = document.getElementById('Extra');
    var isHidden = buttons.style.display == 'none';
    buttons.style.display = isHidden ? 'block' : 'none';
  });
});

#more {
  visibility: hidden;
}

@media screen and (max-width: 480px) {
  #more {
    visibility: visible;
  }
  nav li:nth-of-type(5) {
    display: none;
  }
  nav li:nth-of-type(6) {
    display: none;
  }
  nav li:nth-of-type(7) {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="center">
  <nav>
    <ul id="menu">

      <li>@Html.ActionLink("Page1", "Page1", "Home")</li>
      <li>@Html.ActionLink("Page2", "Page2", "Home")</li>
      <li>@Html.ActionLink("Page3", "Page3", "Home")</li>
      <li id="more">@Html.ActionLink("More", null, null, new { @id = "more" })</li>
      <li id="Extra">@Html.ActionLink("Page4", "Page4", "Home")</li>
      <li id="Extra">@Html.ActionLink("Page5", "Page5", "Home")</li>
      <li id="Extra">@Html.ActionLink("Page6", "Page6", "Home")</li>
    </ul>
  </nav>
</div>

【问题讨论】：

ID 应该是唯一的。 w3.org/TR/WCAG20-TECHS/H93.html

标签： javascript html css asp.net asp.net-mvc

【解决方案1】：

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

 $("#more").click(function(){
     $(".Extra").toggle();
    }); 

});

  </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="center">
                <nav>
                    <ul id="menu">

                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                        <li id="more"><a href="#">More</a></li>
                        <li class="Extra" style="display:none"><a href="#">Page 4</a></li>
                        <li class="Extra" style="display:none"><a href="#">Page 5</a></li>
                        <li class="Extra" style="display:none"><a href="#">Page 6</a></li>
                  </ul>
                </nav>
            </div>

【讨论】：