-2

因此，在我的 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>

有任何想法吗？

4

2 回答 2

0 
 <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>
于 2013-07-26T19:59:31.913 回答
0 
$(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

于 2013-07-26T17:45:12.637 回答