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 を使用して必要な量に変更できます。私が正しく理解していれば、あなたが探しているのは、矢印/ビューモアが常に表示されるということです。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#content1differenceInHeight#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 に答える