c# - 无法使用 Javascript 折叠 div

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

这就是我的做法。

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>

然后将“拖拽框”放入其中。您可以拥有其中 2 个“列”

希望这有帮助。