引导轮播没有响应

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，则将更改屏幕颜色。