javascript - 使用 JavaScript 显示和隐藏 div，但再次显示 div 时样式消失

问题描述

我正在使用图片库页面 Sitecore MVC 平台。我正在处理的剃须刀页面应仅在默认情况下显示前 8 张图像。当用户单击加载更多按钮时。它将显示所有图像。

前 8 个图像将被堆叠，它应该在 4 列中。其余图像应该是 4 跨并在单击“加载更多”按钮时向下扩展

我决定使用 2 个 Div 和 JavaScript 来实现 Load More 功能。例如，一个 div 显示 8，另一个显示全部。

前 8 个以正确的样式显示，但是当我隐藏并以完全相同的样式显示另一个 div 时，它没有正确渲染。它们不是 4 列，而是全部堆叠成 1 列。

请帮忙.....

   @{
    //to handle id must start with letter compatibility. HTML5 removed this restriction tho
    var minimisedDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());
    var loadMoreDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());

}
<head>
    <script>
        function toggleDiv() {
            var minimised = document.getElementById("@minimisedDivId");
            var loadMore = document.getElementById("@loadMoreDivId");

            if (minimised.style.display === "none") {
                minimised.style.display = "block";
                loadMore.style.display = "none";
            } else {
                minimised.style.display = "none";
                loadMore.style.display = "block";
            }
        }


    </script>
    <style>
        .imagegallery-container {
            margin: 0px;
            padding: 0px;
            position: relative;
            text-align: center;
        }

        .imagegallery-area {
            margin: 0px;
            padding: 0px;
        }

        .imagegallery {
            margin: 0px;
            padding: 0px;
        }

        .image-area {
            /*    margin: 0px;
            padding: 0px;*/
        }

        .thumbnail {
            margin: 0px;
            padding: 0px;
        }

        .imageText {
            position: relative;
            bottom: 10%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .loadMore {
            margin: 0 auto; /*center*/
        }
    </style>
</head>

<div class="row imagegallery-container">
    <div class="col">&nbsp;</div>
    <!-- TODO: Load first 8 -->
    <div class="imagegallery-area row col-8" id="@minimisedDivId">
        @if (Model.IsInEditMode)
        {
            foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
            {
                <span class="col-3 editor">
                    @Html.Glass().Editable(item.value, x => x.Thumbnail)
                </span>
            }
        }

        @if (Model.Children.Any())
        {
            <!-- TODO: I need to take the first 8 of and display them-->
            foreach (var item in Model.Children.ToList().Take(8).Select((value, index) => new { value, index }))
            {
                <a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">

                    @*<img src="@item.value.ThumbnailUrl" />*@
                    @Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
                    <div class="imageText">@Html.Glass().Editable(item.value, x => x.Text)</div>

                </a>
            }
           



           
        }
        <div class="loadMore">
            <button onclick="toggleDiv()">LOAD MORE</button>
        </div>
    </div>

    <!-- TODO: Load all -->
    <div class="imagegallery-area row col-8" id="@loadMoreDivId" style="display:none;">
        @if (Model.IsInEditMode)
        {
            foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
            {
                <span class="col-3 editor">
                    @Html.Glass().Editable(item.value, x => x.Thumbnail)
                </span>
            }
        }

        @if (Model.Children.Any())
        {
                // Display max of 8 items, 4 across and stacking to 2
                foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
                {
                    //Carousel should have a closed button,top right.  Image number buttom right e.g 1 of 8
                    <a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">

                        <img src="@item.value.ThumbnailUrl" />
                        @Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
                        <div class="imageText">@Html.Glass().Editable(item.value, x => x.Text)</div>

                    </a>
                }
        }
        <div class="loadMore">
            <button >Collapsed</button>
        </div>
    </div>


    <!-- TODO: I would then display all the elements if LOAD MORE is clicked -->
    <!-- LOAD MORE-->
    <!-- This would show all the rows-->
    <!-- Modal -->
    <div class="modal fade" id="carouselModal" tabindex="-1" role="dialog" aria-labelledby="carouselModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="carouselControls" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselControls" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselControls" data-slide-to="1"></li>
                            <li data-target="#carouselControls" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            @if (Model.Children.Any())
                            {
                                //get the first imageItem for "active" class
                                <div class="carousel-item active">
                                    <img class="d-block w-100" src="@Model.Children.ToList().First().ImageUrl" alt="@Model.Children.ToList().First().Title" />
                                    <div class="imageText">@Model.Children.ToList().First().Text)</div>
                                </div>
                                Model.Children.ToList().Skip(1);

                                //The carry on the rest in the look with no active
                                foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
                                {
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="@item.value.ImageUrl" alt="@item.value.Title" />
                                        <div class="imageText">@Html.Glass().Editable(item.value, x => x.Text)</div>
                                    </div>
                                }
                            }
                        </div>
                        <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    x of x
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="col">&nbsp;</div>
</div>

标签： javascriptcssrazorsitecore-mvc

javascript - 使用 JavaScript 显示和隐藏 div，但再次显示 div 时样式消失

问题描述

解决方案

推荐阅读