隐藏部分 div - 点击时打开答案

【问题标题】：Hide partial div - toggle open on click隐藏部分 div - 点击时打开
【发布时间】：2011-06-07 10:51:02
【问题描述】：

我知道如何切换整个 div，但是我只想隐藏除前 10% 或前 100px 之外的所有内容。然后当点击 div 时，会打开整个 div。

我以为我不久前看到了这个，但不记得在哪里。

谢谢。

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').hide();

 // toggles the slickbox on clicking the noted link
  $('#slick-toggle').click(function() {
 $('#slickbox').toggle(400);
 return false;
  });
});

【问题讨论】：

标签： html toggle visibility

【解决方案1】：

看看我主页上的图片，这是你想做的吗？ http://www.carsonshold.com/

当您将鼠标悬停在它上面时，它会喷射出来，但可以轻松更改为单击。做起来有点复杂，而且在 IE 中仍然不是完美的（页面加载并且在你将鼠标悬停在它上面之前无法识别剪辑）。

它可能与您想要的略有不同，因为我是在图像而不是 div 上执行此操作的，因此我需要为剪贴蒙版设置动画。我使用的函数如下：

var featureDuration = 300; //time in miliseconds

    $('#featured-img').hover(function() {
        $(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});            
    }, function() {
        $(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
    });

如果要为剪辑制作动画，则还需要插入此 JS，否则它的行为将不正常。 http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/

如果您不确定我是如何完成其余部分的，请查看我的代码中的 CSS，或者如果您有任何问题，请在此处发表评论。

干杯

【讨论】：

【解决方案2】：

这样做相当快，注意它只会隐藏底部。

http://jsfiddle.net/loktar/KEjeP/

改变高度的简单切换，隐藏其中的其余内容。动画也很容易，只需修改切换功能以调整高度而不是添加类。

【讨论】：

不适用于我的 jquery 控制布局。在我扩展和收缩 div 之后，它显示为 50px 高。

【解决方案3】：

你的代码应该是这样的：

$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    $('#slickbox').animate({height: '20px'});

    // toggles the slickbox on clicking the noted link
    $('#slick-toggle').click(function() {
        $('#slickbox').animate({height: '100%'});
        return false;
    });
});

【讨论】：