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

我的Javascript控制框的开启和关闭：

    $('.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();
});

enter image description here

以上是该问题的快速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

        }
    }

}

希望这会有所帮助，您可以阅读更多相关信息here。

Answer 2

我相信你的CSS @media属性中的代码在这里起作用。检查并确认。

您可以手动定义每个屏幕的外观。例如：

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

如果屏幕尺寸小于300，这将改变屏幕颜色。

Bootstrap carousel在响应时没有反应

2 个答案: