Question

我有一个链接，当点击该链接然后显示隐藏的div内容。但问题是下次点击我需要折叠div。

这是我的隐藏DIV

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

这是链接

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

这是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 () {
    });
});

Answer 1

你需要一个条件（if，else）在隐藏div时调用fadeIn，在显示div时调用fadeOut！

因为你的代码只是第一次调用fadeIn，它会fadeIn而下一次调用它也会fadeIn，所以它会留在那里。

我不知道在JQuery中，但我是如何在javascript中做的，知道div是显示还是隐藏：

if(div.style.display == 'block') {
} 
    //call fadeOut
else {
    //call fadeIn
}

Answer 2

这就是我的做法。

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

因此，当您单击标题（h2）时，它会隐藏，当您再次单击它时，它会显示。你还需要一些css ..这是我的。

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

我也在可排序的jquery中使用'dragbox'。所以你可以告诉你，你不需要.columns，但是我展示了它们只是因为你走了那条路并且想把div用作列。如果你这样做，你需要做的就是添加

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

然后将'dragbox'放在其中。您可以拥有其中两个“列”

希望这会有所帮助。

Answer 3

只需使用fadeToggle：

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

    $('#ajax').html(contentTobeLoaded).fadeToggle(100000, function () {
    });
});

Answer 4

您可以在超链接的click事件中使用所需div的切换方法。

我在这个小提琴中为你做了一个例子＆gt; jsfiddle.net/MK68L

希望有所帮助

无法使用Javascript折叠div

4 个答案: