Question

overflow-y:hidden将隐藏上部和下部的视图。我们可以只显示上半部分而不是下半部分。现在我喜欢这样的事情overflow-y-top:visible; overflow-y-bottom:hidden;
同样overflow-x-left:visible;overflow-x-right:hidden
那么我们可以用css做些什么吗？

我的具体问题：

HTML：

<div id="main">
   <div id="arrow">▲</div>
   <div id="content">id="toggle_view">view more</div>
   <div id="content1"> this is any thext</div>
   <div id="content2"> this is any thext</div>
   <div id="content3"> this is any thext</div>
   <div id="content4"> this is any thext</div>
</div>

的CSS：

#main {overflow-y:hidden;height:100px;position:relative}
#arrow {position:absolute;top:-30px;}
#toggle_view{position:absolute;right:0;bottom:0;}

现在我想隐藏内容而不是箭头。那么是否有一些技术可以让div的下面部分隐藏起来而不是顶部？

Answer 1

您可以在元素顶部添加填充，无论您想要显示多少，然后可以使用javascript更改为您需要的内容。如果我理解正确，你要找的是始终显示箭头/视图。所以添加padding-top: 20px;或任何你喜欢的测量单位应该可以正常工作

我在这里添加了一些简单的javascript以使其正常工作。你可能想要动画和所有......

看到这个jsfiddle： http://jsfiddle.net/KPbLY/85/

要使背景不进入填充（如注释中所述），请使用另一个嵌套div，例如：

http://jsfiddle.net/KPbLY/87/

Answer 2

让我们先看一下HTML代码。你想要：

<div id="arrow">▲ (view less)</div>
<div id="main">
   <div id="content1">text from #content1</div>
   <div id="content2">text from #content2</div>
   <div id="content3">text from #content3</div>
   <div id="content4">text from #content4</div>
</div>
<div id="toggle_view">view more</div>

然后对于CSS，你想要：

#main {overflow-y:hidden;height:100px;position:relative}
#arrow {cursor: pointer;}
#toggle_view{ cursor: pointer;}
.inactive { color: gray; }

如果没有cursor:pointer，很难说你可以点击一下。此外，我们希望向用户指示按钮何时处于非活动状态（例如，如果您已经查看每个按钮，则单击“查看更多”无用

好吧，让我们来看看JavaScript吧。你提到你正在使用一个库，但不是哪一个，所以我只假设jQuery。首先，我们需要设置变量：

var heightOfMain = $('#main').height();
var heightOfContent1 = $('#content1').height();
var differenceInHeight = heightOfMain - heightOfContent1;

然后，点击#arrow时，我们想要更改#main的高度以删除#content2，#content3和#content4，只留下{后面{1}}（基本上，我们要“删除”等于#content1的高度）。我们还希望停用differenceInHeight，因为如果您已经查看较少，则说“少看”是没有意义的。最后，我们要确保“查看更多”处于活动状态（因为我们稍后会将其切换）。

#arrow

最后，我们要启用$('#arrow').click(function() { $('#main').animate({ height: heightOfContent1 }); $(this).addClass('inactive'); $('#toggle_view').removeClass('inactive'); });。点击它时，我们想要重新添加我们起飞的高度（#toggle_view）。然后，由于我们已经查看了所有内容，因此我们可以停用“查看更多内容”。最后，我们需要再次激活“查看更少”。

differenceInHeight

对于所有内容，请参阅this jsFiddle。

Answer 3

试试这个

#content {
    display: none;
}

或

#content {
    visibility: hidden;
}

Answer 4

我认为你想要的东西是这样的：

<div class="show-panel">
   <div class="arrow">&#9650;</div>
   <div class="content">This is some content... 
                        several paragraphs for example.</div>
</div>

使用以下jQuery操作：

$(".arrow").click(function(){
    $(this).next().toggle();
});

小提琴参考：http://jsfiddle.net/audetwebdesign/bQ8G3/

如果需要，您可以添加CSS样式以初始隐藏内容。最干净的方法是将要显示/隐藏的元素包装在父元素中，然后显示/隐藏父元素。

Answer 5

现在您已经习惯了css

就像这样

#main {overflow-y:hidden;height:100px;position:relative; background:red;}

#toggle_view{position:absolute;right:0;bottom:0;}

#arrow {position:absolute;top:50px;right:0;background:green;padding:5px; cursor:pointer;z-index:2;}
#main > #arrow ~ div{display:none;}
#main > #arrow:focus ~ div, #main > #arrow:hover ~ div{display:block;}

<强> Demo

溢出隐藏在css之下而不是顶部

5 个答案: