jQuery Mobile Autodivider格式不正确-使用热毛​​巾视图

问题描述

我正在尝试使我的列表看起来像此:

I'm trying to get my list to look like this:

但它看起来像这样:

我已经直接从jQuery移动网站复制了代码:

I've copied the code directly from the jQuery mobile site:

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

我的捆绑包包含js和css文件:

And my bundles have the js and css files:

bundles.Add(
              new ScriptBundle("~/scripts/vendor")
                .Include("~/scripts/jquery-{version}.js")
                .Include("~/scripts/jquery.mobile-{version}.js")

bundles.Add(
              new StyleBundle("~/Content/css")
                .Include("~/Content/ie10mobile.css")
                .Include("~/Content/jquery.mobile-{version}.css")
                .Include("~/Content/jquery.mobile.structure-{version}.css")
                .Include("~/Content/jquery.mobile.theme-{version}.css")

但是，我无法让列表看起来像应该的样子.我可能会缺少什么?

However, I cannot get my list to look like it's supposed to. What could I be missing?

注意:当您在Chrome浏览器中查看F12窗口时，没有看到任何错误，但是窗口右下方有一个警告图标:

Note: When viewing the F12 window in chrome, I don't see any errors, but there is a little warnings icon at the bottom-right of the window:

但是当我单击它时什么也没有发生.我也将相同的代码粘贴到jsfiddle.net中，并且在那里工作得很好.我只是无法在我的应用中使用它.

But nothing happens when I click on it. I've also pasted that same code into jsfiddle.net and it works just fine there. I just can't get it to work in my app.

编辑-jQuery版本

编辑2-错误?

我刚刚在开发人员工具中注意到了这一点.这可能与它有关吗?删除线是否表示浏览器无法加载某些内容?

I just noticed this in developer tools. Could this have something to do with it? Does the strikethrough mean the browser had trouble loading something?

编辑3-引起问题的热毛巾结构吗?

如果我将相同的HTML放在index.cshtml文件中，它将起作用.但是，当我尝试将其放在任何热毛巾视图(应用程序文件夹，视图文件夹)中时，它都不会呈现.也许关于该文件夹结构的某些内容无法找到css?

If I put that same HTML in my index.cshtml file, it works. But when I try to put it in any of the hot towel views (app folder, views folder) it just doesn't render. Maybe there is something about that folder structure that isn't allowing the css to be found?

编辑4-查看源代码的正常工作时间

如果将列表放在index.cshtml上，并在开发工具中进行检查，则可以看到所有应用的样式:

If I put the list on index.cshtml and inspect it in dev tools, I can see all of the styles applied:

但是在另一个视图(在app \ views文件夹中)，它很简单:

But on the other view (in the app\views folder), it's just plain:

编辑5-用于index.cshtml的CSS

我在index.cshtml和apps.html上有相同的列表.这些样式在index.cshtml上的列表中显示，但在apps.html上的列表中不存在.对于apps.html，不是样式被划掉了，而是根本就没有.

I have the same list on index.cshtml and on apps.html. These styles show up for the list on index.cshtml, but they don't exist for the list on apps.html. For apps.html, it's not that the styles are crossed off, they're just not there.

推荐答案

CSS是级联的，因此，如果CSS具有删除线，则意味着其他内容会覆盖它.这可能意味着之后出现了具有相同类的东西，之前/之后出现了具有更精确匹配项的东西，或者某些东西被列为！important.要找出造成这种情况的原因，您可以查看Chrome工具的右侧，看看哪些样式来自何处.或者，您可以上下滚动显示的列表，然后在此处查找.

The CSS is cascading, so if the CSS has a strikethrough that means something else overrode it. That could mean something came after it that had the same class, something came before/after it that has a more precise match, or something was listed as !important. To find out what is causing it you can look at the right hand side of Chrome tools to see which styles are coming from where. Or you can scroll up and down the list that you showed and look for it there.

最后，您可以通过在删除线规则中添加！important来进行测试，以查看它们是否被应用(只是为了对其进行测试).

Finally, you can test it by adding !important to the strikethrough rules to see if they get applied (just to test it).

这篇关于jQuery Mobile Autodivider格式不正确-使用热毛​​巾视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！