的Javascript显示/隐藏 - 我不希望它隐藏整个元素

这可能是一个相当简单的问题，但我是新来的JavaScript和jQuery ....的Javascript显示/隐藏 - 我不希望它隐藏整个元素

我有一个网站用基本显示/隐藏切换。我使用的显示/隐藏功能在这里： http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/

所以这里是我的问题.....我真的很喜欢切换部分的前5-10个字始终可见。有什么方法可以改变它，以便它不会隐藏整个元素，但会隐藏除元素的前几个单词外的所有元素？

这里是什么，我想它做了截图： http://answers.alchemycs.com/mobile/images/capture.jpg

2011-12-22 Gwendydd

你可以做一些plugin authoring，我做了一个样本演示here，根据你的截图

<div class="toggle">ShowHide</div> 
<div class="content">some content some content some content some content some content <br/> some content some content some content </div> 
<div class="toggle">ShowHide</div> 
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>

这里的JavaScript/jQuery代码

jQuery.fn.myToggle = function(selector, count) { 
    var methods = { 
     toggle: function(selector, count) { 
      if ($(selector).is(':visible')) { 
       var span = $('<span>'); 
       span.text($(selector).text().substr(0, count) + "..."); 
       span.insertAfter($(selector)); 
       $(selector).hide(); 
      } 
      else { 
       $(selector).show(); 
       $(selector).next('span').hide(); 
      } 
     } 
    }; 
    $(this).each(function() { 
     methods.toggle($(this).next(selector), count); 
     $(this).click(function(evt) { 
      methods.toggle($(this).next(selector), count); 
     }); 
    }); 
}; 
$(function() { 
    $('.toggle').myToggle('.content', 3); 
});

来源

2011-12-22 18:55:55 kvc

谢谢！这看起来很棒 - 我会在我的网站上玩这个游戏，看看会发生什么...... – Gwendydd 2011-12-22 19:02:01

我已经修改了代码，并且我几乎已经完成了所有我需要的操作。我唯一的问题是，当你加载页面时，一切都可见 - 我如何使它默认隐藏？ – Gwendydd 2011-12-22 19:44:06

我已经更新了代码http://jsfiddle.net/NCg9L/15/ – kvc 2011-12-22 20:06:12

有许多不同的实现可能性：

最多可以划分内容到第一部分和第二部分（主对象内部有两个独立的跨度或div），并只隐藏表示第二部分的子对象，而不隐藏父对象。
可以将其高度设置为仅显示第一部分（溢出：隐藏）
将主对象的内容更改为只有第一部分作为内容（需要您保持其他地方的完整内容，以便您可以在再次展开时将其恢复）。

下面是选项1的工作示例：http://jsfiddle.net/jfriend00/CTzsP/。

来源

2011-12-22 18:34:33 jfriend00

2. ...和[text-overflow：elipsis]（https://developer.mozilla.org/en/CSS/text-overflow）。 – Rup 2011-12-22 18:36:36

@Rup - 如果这是所需的外观，你可以只在一些浏览器中工作。 – jfriend00 2011-12-22 18:44:12

为我的答案添加了一个工作示例：http://jsfiddle.net/jfriend00/CTzsP/ – jfriend00 2011-12-22 18:52:09

你会需要：

放在一个跨度/等。第一Ñ字之后，并且仅隐藏那部分，或
更改可视区域，或
更换或切换跨度/等。与“折叠”的看法。

最后一点是可定制的;使用两个单独的元素可以在不修改添加/删除DOM元素的情况下播放不重要的游戏（显示图像，例如像一个小箭头）。

我倾向于最后一个，因为它很简单明显，但这是个人喜好，而且确实不像过去那样真实。

来源

2011-12-22 18:34:49

所有这些建议都很有用，但我对JavaScript已经足够新了，因此我需要一些关于如何实际实现它们的指导。你可以给我一些代码或告诉我我需要使用哪些函数？ – Gwendydd 2011-12-22 18:52:59

下面是使用CSS属性而不是只解决方案捣毁dom。

http://jsfiddle.net/AYre3/4/

现在如果你想某种动画发生的事情，以及你可能需要做一些测量的沿途。

来源

2011-12-22 19:28:21 Munter

这也很可爱 - 谢谢！ – Gwendydd 2011-12-22 19:51:13

我可以在jsfiddle上正常工作，但是当我将它放在我的网站上时，出现以下错误：'（“＃list”）。on（'click'，'a'，function（）{ '你有什么想法我做错了吗？ – Gwendydd 2011-12-22 20:41:58

我想我得到了错误，因为我的网站有jquery 1.6.2。我切换到1.7.1。现在我没有收到任何错误消息，但没有任何反应当我点击“显示/隐藏”按钮。任何建议？ – Gwendydd 2011-12-23 03:53:16

的Javascript显示/隐藏 - 我不希望它隐藏整个元素

回答

相关问题