Ich habe einen Link. Wenn dieser Link angeklickt wird, wird versteckter Div-Inhalt angezeigt. Das Problem ist jedoch, dass ich beim nächsten Klicken den Div reduzieren muss.

Hier ist mein versteckter DIV

 <div id="divHiddenContainer" style="display: none;">
 <div id="divItem1"> <span">
 </span></div>

Hier ist der Link

<a href="#1" class="aItemLnk" id="a1">Read More</a>

Hier ist Javascript

<script type="text/javascript">
$(".aItemLnk").click(function () {
    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#divItem" + id).html();

    $('#ajax').html(contentTobeLoaded).fadeIn(100000, function () {
    });
});
0
TechGuy 27 Nov. 2013 im 22:35

4 Antworten

Beste Antwort

So mache ich meine.

Javascript

<script type="text/javascript">
 $(function () {
            $('.dragbox')
            .each(function () {
                $(this).hover(function () {
                    $(this).find('h2').addClass('collapse');
                }, function () {
                    $(this).find('h2').removeClass('collapse');
                })
                .find('h2').hover(function () {
                    $(this).find('.configure').css('visibility', 'visible');
                }, function () {
                    $(this).find('.configure').css('visibility', 'hidden');
                })
                .click(function () {
                    $(this).siblings('.dragbox-content').toggle();
                })
                .end()
                .find('.configure').css('visibility', 'hidden');
            });
</script>

HTML

<div class="dragbox" id="Widget2" runat="server">
            <h2 style="font-size: 14pt">Heading Goes Here</h2>
            <div class="dragbox-content">
                //Information Here
            </div>
        </div>

Wenn Sie also auf die Kopfzeile (h2) klicken, wird sie ausgeblendet und wenn Sie erneut darauf klicken, ist sie sichtbar. Du wirst auch etwas CSS brauchen. Hier ist meins.

CSS

.column{
    width:49%;
    margin-right:.5%;
    min-height:300px;
    background:#e2e2e2;
    float:left;
}
.column .dragbox{
    margin:5px 2px  20px;
    background:#fff;
    position:relative;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.column .dragbox h2{
    margin:0;
    font-size:12px;
    padding:5px;
    background:#f0f0f0;
    color:#000;
    border-bottom:1px solid #eee;
    font-family:Verdana;
    cursor:move;
}
.dragbox-content{
    background:#fff;
    min-height:100px; margin:5px;
    font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
    background: #f0f0f0;
    border:1px dashed #ddd;
}
.dragbox h2.collapse{
    background:#f0f0f0 url("../Images/collapse.png") no-repeat top right;
}
.dragbox h2 .configure{
    font-size:11px; font-weight:normal;
    margin-right:30px; float:right;
}

Ich benutze die 'Dragbox' auch in einer sortierbaren Abfrage. Wie Sie sehen, werden Sie die .columns nicht benötigen, aber ich habe sie nur für den Fall gezeigt, dass Sie diesen Weg gehen und divs als Spalten verwenden möchten. Wenn Sie dies tun, müssen Sie nur hinzufügen

<div class="column" id="column1" runat="server">
</div>

Und dann platzieren Sie die 'Dragbox' darin. Sie können 2 dieser 'Spalten' haben

Hoffe das hilft.

1
Humpy 27 Nov. 2013 im 19:15

Sie benötigen eine Bedingung (falls, sonst), um fadeIn aufzurufen, wenn das div ausgeblendet ist, und fadeOut, wenn das div angezeigt wird!

Da Ihr Code nur beim ersten Mal FadeIn aufruft, wird er eingeblendet und beim nächsten Aufruf wird er ebenfalls eingeblendet, sodass er dort bleibt.

Ich weiß es in JQuery nicht, aber so mache ich es in Javascript, um zu wissen, ob das div angezeigt oder ausgeblendet wird:

if(div.style.display == 'block') {
} 
    //call fadeOut
else {
    //call fadeIn
}
1
Shryme 27 Nov. 2013 im 18:50

Verwenden Sie stattdessen einfach fadeToggle:

$(".aItemLnk").click(function () {
    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#divItem" + id).html();

    $('#ajax').html(contentTobeLoaded).fadeToggle(100000, function () {
    });
});
1
pquest 27 Nov. 2013 im 19:15

Sie können die Umschaltmethode für Ihr gewünschtes Div innerhalb des Klickereignisses eines Hyperlinks verwenden.

Ich habe in dieser Geige ein Beispiel für Sie gemacht> jsfiddle.net/MK68L

Ich hoffe es hilft

1
candeias 27 Nov. 2013 im 23:52