这可能是一个相当容易的问题,但我是JavaScript和jquery的新手....
我有一个基本显示/隐藏切换的网站。我正在使用的显示/隐藏功能在这里: http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
所以这是我的问题.....我真的希望切换部分的前5-10个单词始终可见。有没有什么方法可以改变它,以便它不会隐藏整个元素,但隐藏了除元素的前几个单词之外的所有单词?
以下是我希望它做的截图: http://answers.alchemycs.com/mobile/images/capture.jpg
答案 0 :(得分:4)
有许多不同的实施可能性:
以下是选项1的工作示例:http://jsfiddle.net/jfriend00/CTzsP/。
答案 1 :(得分:2)
您需要:
最后一点是可定制的;使用两个单独的元素可以播放琐碎的游戏(显示图像,例如,像一个小的卷曲箭头),而无需修改添加/删除DOM元素。
我倾向于最后一个因为它简单而明显,但这是个人偏好,并且真的不像以前那样真实。
答案 2 :(得分:1)
您可以执行一些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);
});
答案 3 :(得分:0)