it-swarm.com.de

überlauf versteckt nicht oben in CSS

overflow-y:hidden blendet die Ansicht sowohl im oberen als auch im unteren Teil aus. Können wir nur den oberen Teil zeigen, aber nicht den unteren Teil. Nun mag ich so etwas overflow-y-top:visible; overflow-y-bottom:hidden;
Ähnlich overflow-x-left:visible;overflow-x-right:hidden
Gibt es etwas, was wir in css tun können?

Spezifisches Problem meines:

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

Nun möchte ich den Inhalt nicht den Pfeil verbergen. Gibt es eine Technik, um nur den unteren Teil von div nicht oben zu verstecken?

13
vusan

Sie können die Auffüllung am oberen Rand des Elements hinzufügen, je nachdem, wie viel Sie anzeigen möchten. Dies kann sich dann ändern, wenn Sie JavaScript verwenden. Wenn ich es richtig verstanden habe, ist es das, was Sie suchen, dass der Pfeil/die Ansicht immer angezeigt wird. Das Hinzufügen eines padding-top: 20px; oder der gewünschten Maßeinheit sollte funktionieren

Ich habe hier ein paar einfache Javascript hinzugefügt, damit es funktioniert. Sie wollen wahrscheinlich Animationen und das alles ...

Siehe dieses jsfiddle: http://jsfiddle.net/KPbLY/85/

Um den Hintergrund nicht in die Auffüllung zu bringen (wie in den Kommentaren erwähnt), verwenden Sie ein anderes verschachteltes div wie:

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

8
Don

Sehen wir uns zuerst den HTML-Code an. Sie wollen:

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

Dann für das CSS möchten Sie:

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

Es ist wirklich schwer zu sagen, dass Sie etwas anklicken können, wenn es keinen cursor:pointer gibt. Außerdem möchten wir den Benutzern mitteilen, wenn eine Schaltfläche inaktiv ist (z. B. ist es sinnlos, auf "mehr anzeigen" zu klicken, wenn Sie bereits alle anzeigen

Alles klar, lass uns zu JavaScript gehen. Sie haben erwähnt, dass Sie eine Bibliothek verwenden, aber nicht welche, also gehe ich einfach von jQuery aus. Zuerst müssen wir unsere Variablen festlegen:

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

Wenn Sie dann auf #arrow klicken, möchten wir die Höhe von #main ändern, um #content2, #content3 und #content4 zu entfernen und nur #content1 zurückzulassen (im Grunde möchten wir eine Höhe differenceInHeight "entfernen"). Wir möchten dann auch #arrow deaktivieren, da es nicht sinnvoll ist, "weniger anzeigen" zu sagen, wenn Sie weniger sehen. Schließlich möchten wir sicherstellen, dass "Mehr anzeigen" aktiviert ist (da wir das später umschalten werden).

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

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

Zum Schluss möchten wir #toggle_view aktivieren. Wenn Sie darauf klicken, möchten wir die Höhe, die wir abgenommen haben, hinzufügen (differenceInHeight). Da wir alles bereits angesehen haben, können Sie "mehr anzeigen" deaktivieren. Schließlich müssen wir "view less" erneut aktivieren. 

$('#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();

});

Für alles zusammen, siehe dieses jsFiddle

2
Fluoxetine

Versuche dies

#content {
    display: none;
}

oder

#content {
    visibility: hidden;
}
1
Johan

Jetzt können Sie css verwenden 

Wie so  

#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

0
Rohit Azad

Ich denke, dass Sie etwas wollen, das so funktioniert:

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

mit der folgenden jQuery-Aktion:

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

Geige-Referenz: http://jsfiddle.net/audetwebdesign/bQ8G3/

Sie können einen CSS-Stil hinzufügen, um den Inhalt zunächst auszublenden, wenn dies gewünscht wird. Der sauberste Weg, dies zu tun, besteht darin, die Elemente, die angezeigt/ausgeblendet werden sollen, in ein übergeordnetes Element einzuwickeln und dann das übergeordnete Element anzuzeigen/auszublenden.

0
Marc Audet