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

Question

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

基本上，我正在尝试对网站的移动端进行编码，但是我的网页上有6个@Html.ActionLink按钮，我不希望这些按钮填满整个页面，所以我想要的是当网页检测到该内容时移动用户正在查看网站（ @media screen and (max-width: 480px) ），最后三个按钮被隐藏，并且将显示一个名为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> 

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