根据鼠标单击隐藏或显示视图上的链接答案

【问题标题】：Hide or display links on view depending on mouse click根据鼠标单击隐藏或显示视图上的链接
【发布时间】：2026-02-20 16:15:01
【问题描述】：

因此，在我的 MVC 应用程序中，我想在视图中显示一个链接，单击该链接时，可以通过以下代码在屏幕上显示一组链接：

<ul class="productmenu">
   @foreach (ProductCategoryRecord pc in Model.ProductCategories)
   {
      <li class="active"><a href="@Url.Action("Category", "Store", new { id = pc.Name })">@pc.Name</a></li>
   }

   @if (Model.ProductCategories.Count() <= 0)
   {
      <p>There are no products in this category</p>
   }
</ul>

那么我将如何使用链接“更多”从视图中启用/禁用此代码，单击该链接将更改为“更少”（并显示链接），再次单击时会将“更少”更改回“更多”（并隐藏链接）

类似....<li class="active"><a href="@Url.Action("Category", "Store", new { id = string.Empty })">More</a></li> 只有我不需要为此返回控制器，所以 JS 或我猜测的东西？感谢您的帮助

所以我让它工作了，但我需要“显示产品”文本在点击时显示为“隐藏产品”..

 <li id="showProductCategories" class="showProductCategories">
           <a>Show Products</a>
        </li>
  </ul>

     <div id="productLink">
          <ul class="categorymenu">
             @foreach (ProductCategoryRecord pc in Model.ProductCategories)
             {
                 <li class="active"><a href="@Url.Action("Category", "Store", new { id = pc.Name })">@pc.Name</a></li>
             }

             @if (Model.ProductCategories.Count() <= 0)
             {
                  <p>There are no products in this category</p>
             }
          </ul>
     </div>

     <script type="text/javascript" language="javascript">
         $('#showProductCategories').click(function () {
             $('#productLink').toggle('slow', function () {

             });
         });
     </Script>

有什么想法吗？

【问题讨论】：

做一些研究，你可以从这里开始：api.jquery.com/toggle

标签： javascript jquery asp.net-mvc

【解决方案1】：

$(function() {

  var $container = $(document.getElementById('container')),
      $categories = $container.find('.categorymenu'),
      $toggle = $container.find('#toggleProductCategories'),
      minEntries = 1 // amount of entries to show by default
  ;

  minEntries -= 1;

  $('li', $categories).filter(':gt('+minEntries+')').hide();

  $toggle.click(function (event) {

    $('li', $categories).filter(':gt('+minEntries+')').toggle('slow');

    $toggle.html(function(i, html) {
      return html === 'Less' ? 'More' : 'Less';
    });

    event.preventDefault();

  });

});

见例子@http://jsbin.com/ejaniz/1/edit

【讨论】：

【解决方案2】：

 <div id="productLink">
      <ul class="categorymenu">
         @foreach (ProductCategoryRecord pc in Model.ProductCategories)
         {
             <li class="active"><a href="@Url.Action("Category", "Store", new { id = pc.Name })">@pc.Name</a></li>
         }

         @if (Model.ProductCategories.Count() <= 0)
         {
              <p>There are no products in this category</p>
         }
      </ul>
    <div id="showHideButtons">
        <span class="toggleLink">Hide</sapn>
        <span class="toggleLink">Show</sapn>
    </div>
 </div>

 <script type="text/javascript" language="javascript">
     $('#showHideButtons').click(function () {
        $('.categorymenu').slideToggle();
        $('.toggleLink').toggle();
         });
     });
 </Script>

【讨论】：