Question

因此，在我的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或我猜的东西？谢谢你的帮助

所以iv得到它的工作，但我需要'显示产品'文本看起来'隐藏产品的时候点击它..

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

任何想法？

Answer 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

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

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

2 个答案: