23

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">▲&lt;/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 的下面部分隐藏而不是顶部？

4

5 回答 5

13

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

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

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

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

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

于 2013-06-21T18:56:49.487 回答
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，只留下#content1后面（基本上，我们想要“移除”等于 的高度differenceInHeight）。我们还想取消激活#arrow，因为如果您已经少看，说“少看”是没有意义的。最后，我们要确保“查看更多”处于活动状态（因为我们稍后会切换它）。

$('#arrow').click(function() {

    $('#main').animate({
        height: heightOfContent1 
    });  
     $(this).addClass('inactive');
     $('#toggle_view').removeClass('inactive');
});

最后，我们要启用#toggle_view. 单击它时，我们想重新添加我们起飞的高度（differenceInHeight）。然后，由于我们已经查看了所有内容，我们可以禁用“查看更多”。最后，我们需要再次激活“少看”。

$('#toggle_view').click(function() {

    //you want to remove contents 2 through 4, which have a combined height
    //of differenceInHeight
    $('#main').animate({
        height: differenceInHeight });  
        $(this).hide();
        $('#arrow').show();

});

有关所有内容，请参阅此 jsFiddle。

于 2013-03-28T15:01:11.063 回答
1

试试这个

#content {
    display: none;
}

或者

#content {
    visibility: hidden;
}
于 2013-03-28T11:39:53.993 回答
0

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

<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 样式以最初隐藏内容。最简洁的方法是将要显示/隐藏的元素包装在父元素中，然后显示/隐藏父元素。

于 2013-03-28T11:58:24.740 回答
0

现在你可以习惯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;}

演示

于 2013-03-28T12:26:30.453 回答