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

Question

This is probably a fairly easy question, but I'm new to JavaScript and jquery....

I have a website with a basic show/hide toggle. The show/hide function I'm using is here: http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/

So here's my question..... I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn't hide the entire element, but hides all but the first few words of the element?

Here's a screenshot of what I would like it to do: http://answers.alchemycs.com/mobile/images/capture.jpg

Answer 1

There are many different implementation possibilities:

1. You can divide the contents up into the first part and the second part (two separate spans or divs inside your main object) and hide only the child object that represents the second part, not hide the parent object.
2. Rather than hide the object at all, you can set its height to only show the first part (with overflow: hidden)
3. Change the contents of the main object to only have the first part as the contents (requires you to maintain the full contents somewhere else so you can restore it when expanded again).

Here's a working example of option 1: http://jsfiddle.net/jfriend00/CTzsP/ .

Answer 2

You'd need to either:

• Put in a span/etc. after the first n words, and only hide that part, or
• Change the viewable region, or
• Replace or toggle the span/etc. with the "collapsed" view.

The last is a bit more customizable; using two separate elements allows trivial games to be played (showing an image, for example, like a little curly arrow) without modifying adding/removing DOM elements.

I tend towards the last because it's simple and obvious, but that's a personal preference, and really isn't as true as it used to be.

Answer 3

You can do some plugin authoring ,I did a sample demo here ,based on your screenshot

<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>

here is javascript/jquery code

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);
});

Answer 4

Here is a solution using css properties only instead of mangling the dom.

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

Now if you want some sort of animation happening as well you'll probably need to do a bit of measurement along the way.