这可能是一个相当简单的问题,但我是JavaScript和jquery的新手。
我有一个基本的显示/隐藏切换的网站。我正在使用的显示/隐藏函数如下:http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
所以我的问题是……我真的希望切换部分的前5-10个单词总是可见的。有没有什么办法可以让它不隐藏整个元素,而只隐藏元素的前几个单词?
下面是我希望它做的事情的屏幕截图:http://answers.alchemycs.com/mobile/images/capture.jpg
发布于 2011-12-23 02:55:56
你可以做一些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-23 02:34:34
有许多不同的实现可能性:
下面是选项1的一个工作示例:http://jsfiddle.net/jfriend00/CTzsP/。
发布于 2011-12-23 02:34:49
您需要执行以下任一操作:
最后一个元素更具可定制性;使用两个单独的元素,无需修改添加/删除DOM元素,就可以玩一些琐碎的游戏(例如,显示图像,就像一个小卷曲箭头)。
我倾向于最后一个,因为它很简单和明显,但这是个人偏好,真的不像以前那样正确。
https://stackoverflow.com/questions/8608295
复制相似问题