1

我有一个使用引导响应 CSS 的 MVC 应用程序。在应用程序中，我有一个显示零到多行的视图，如下所示：

@model List<SearchItem>

<section>
    @foreach (SeachItem searchitem in @Model)
    {
        @Html.Partial("Searchitem", searchitem)
    }
</section>

在 SearchItem 中显示了很多字段。（我可能应该对每个领域都有看法，但这是另一个问题）。像这样：

foreach (string descShort in descriptions)
{
     <div class="row-fluid">
          <div class="span2">@header</div>
          <div class="span10">@descShort</div>
     </div>
}

有时这些“描述”字段真的很长，然后我选择只显示前 20 个字符。但我希望用户可以选择查看整个字段，如果她愿意的话。我有两个字段：descLong 和 descShort，现在我只显示 descShort（缩短的字段）。但是通过单击鼠标，我想隐藏 descShort 字段并显示 descLong 。

所以我打算做这样的事情：

http://www.mkyong.com/jquery/jquery-show-and-hide-example/

但是我在使用这种方法时遇到了一些问题，因为理论上我可以拥有数十万个应该是可隐藏/可显示的字段，而不仅仅是示例中的一个（“p”）。

那么，我最好的方法是什么？

我是否应该将每个“描述”放在自己的视图中并将 descShort 和 descLong 传递给该视图？如果是这样，我如何将这两个字符串传递给该视图，然后我可以将 jQuery 示例放在该视图中并调用显示/隐藏字段“<p>”，即使我可能调用了数千个字段，它也会起作用“<p>” 整个页面呈现后？

或者有更好的方法吗？

4

1 回答 1

3

我选择“有没有更好的方法”选项。我的建议是使用 CSS 来限制显示的文本，并使用 CSS 类的简单切换在完整版和短版之间切换：

这是我的示例，您可以看到它在 JS Fiddle 上运行：

HTML

<div class="description">
    Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. 
</div>

CSS

.description {
    height: 2.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.full {
    height: auto;
}

jQuery

$('.description').click( function () {
   $(this).toggleClass('full'); 
});

您可以扩展此示例以显示一个可见指示器，用户可以采取行动查看更多信息 - 或者您可以在悬停时执行此操作等 - 这只是概念。

于 2013-03-22T08:53:41.183 回答