引導輪播沒有響應

Question

我有一個旋轉木馬，里面裝有一個小盒子，可以顯示用戶可以填寫的一些文本。 您可以根據需要在此框上上下下切換此框的開和關狀態。

但是，在移動設備中，此框不再出現。 我檢查了元素，可以看到它正在觸發，但是瀏覽器中什么都沒顯示。 有人可以重新檢查一下我的代碼，看看我是否忘記了什么？

我不會發布整個輪播代碼，而只會發布受影響的區域。

輪播影響區域：

<div class="container-fluid slider np">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div id="carousel-733617" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner" role="listbox">
                    @foreach (var slide in Model.Content.GetPropertyValue<ArchetypeModel>("carousel"))
                    {
                        var imageMedia = Umbraco.Media(slide.GetValue("slideImage")).GetCropUrl("CarouselSlide");
                        var slideHeading = slide.GetValue("heading");
                        var slideText = slide.GetValue("text");
                        string relatedLinksRaw = slide.GetValue("relatedLink");
                        dynamic relatedLinks = null;

                        if (!string.IsNullOrEmpty(relatedLinksRaw))
                        {
                            relatedLinks = Json.Decode(relatedLinksRaw);
                        }

                        if (slideCount == 0)
                        {
                            slideClass = "item active";
                        }
                        else
                        {
                            slideClass = "item";
                        }

                        <div class="@slideClass" @*role="option" aria-selected="true" tabindex="0"*@>
                            <img alt="" src="@imageMedia" />
                            <div class="carousel-caption" style="z-index:20;">
                                <div class="buttonslide">
                                    <a href="#" class="btn btn-xs btn-default pull-right openclose">
                                        <i class="glyphicon glyphicon-chevron-down"></i> Close</a>
                                </div>
                                <div class="slidecontent">
                                    <h2>@slideHeading</h2>
                                    <p>
                                        @slideText
                                        <br />

                                        @if (relatedLinks != null)
                                        {
                                            foreach (var relatedLink in relatedLinks)
                                            {                                                    
                                                if (relatedLink.newWindow == true)
                                                {                                                       
                                                    <a href="@relatedLink.link" class="btn btn-square" target="_blank">@relatedLink.caption</a>
                                                }
                                                else
                                                {
                                                    <a href="@relatedLink.link" class="btn btn-square">@relatedLink.caption</a>
                                                }
                                            }
                                        }
                                    </p>
                                </div>
                            </div>
                        </div>

                                        slideCount++;
                    }

我的Java，用於控制框的打開和關閉：

    $('.openclose').click(function(e) { 
    if ($('.slidecontent').is(":visible")){
        $('.openclose').html('<i class="glyphicon glyphicon-chevron-up"></i> Show More');
    }
    else{
        $('.openclose').html('<i class="glyphicon glyphicon-chevron-down"></i> Close'); 
    }   

    $('.slidecontent').toggle('slow');  
    e.preventDefault();
});

以上是該問題的快速MS Paint。

當我縮小瀏覽器時，輪播（黑框）會根據響應設計調整大小。 當達到一定寬度時，綠色框會自動關閉，並消失帶有用於打開/關閉按鈕的條形圖。

當輪播已滿時，綠色框可以正常工作。 當黑框縮小時，綠色框不再出現。 當我檢查元素時，我可以看到我的代碼正在觸發某些操作，但是，綠色框在屏幕上不可見。

Answer 1

您也可以在javascript中添加媒體查詢。

你只需要改變500px任何你想要的，並把代碼添加到if你想使用。

// media query event handler
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    if (mq.matches) {
        // window width is at least 500px

    }
    else {
        // window width is less than 500px

        }
    }

}

希望對您有所幫助，您可以在此處閱讀更多信息。

Answer 2

我相信CSS @media屬性中的代碼在這里發揮了作用。 檢查並確認。

您可以手動定義每個屏幕的外觀。 例如：

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

如果屏幕尺寸小於300，則將更改屏幕顏色。