为什么 MVC JavaScript 粘性菜单仅在不使用 URL 中的 /controller/action 时有效？

Question

我正在使用 MVC 5 并从我购买的 Web 导入了一个 HTML5 丰富的模板。我成功地将应用程序从普通 HTML 移植到 JavaScript 以适应 MVC 如何处理脚本和路由。我没有在应用程序中执行任何自定义路由，因此处理 URL 的标准 /controller/action 方式仍然完好无损。当我导航到没有路径 localhost: 的主 URL 时，一切都完美无缺。当我不执行任何操作导航到家庭控制器时，一切都完美无缺：localhost:/home.

这就是问题所在。当我在 URL 中实际使用操作调用时，只有几个 JavaScript 函数无法工作，例如 localhost:/home/index .

为什么在您指定一个操作之前它可以完美地工作，然后突然只有几个功能失败了？几个动画和所有样式似乎都完好无损。有大量的 JavaScript 文件可以获取代码，但两个不起作用的是粘性菜单 "tmstickup.js"（不确定这是从哪里来的）和 Pixedelic 的相机幻灯片： www.pixedelic.com.

这是我在 _Layout.cshtml 中使用的菜单代码片段。在失败的情况下，菜单只是滚出屏幕，而不是按预期停靠在顶部。

<header id="header">
    <div id="stuck_container">
        <div class="container">
            <div class="row">
                <div class="grid_4">
                    <h1>
                        <a href="@Url.Action("Index","Home")"><img src="~/Content/images/logo.png" alt="discov" /></a>
                    </h1>
                </div>
                <div class="grid_8">
                    <nav>
                        <ul class="sf-menu">
                            <li class="current">@Html.ActionLink("Home", "Index", "Home")<strong></strong></li>
                            <li>@Html.ActionLink("About", "About", "Home")<strong></strong></li>
                            <li>@Html.ActionLink("Services and prices", "Services", "Home")<strong></strong></li>
                            <li>@Html.ActionLink("Order online", "Order", "Home")<strong></strong></li>
                            <li id="last-li">@Html.ActionLink("Contact us", "Contact", "Home")<strong></strong></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>

这是我的 Home/Index.cshtml 中的代码。 None 的图像出现，所有三组措辞都显示在彼此之上。

<div class="camera_main_container  wow fadeIn">
    <div class="slider_wrapper">
        <div class="" id="camera_wrap">
            <div data-src="@Url.Content("~/Content/images/slide1.jpg")">
                <div class="caption fadeIn">
                    <div class="caption_bg">
                        <span class="slider_txt1">Let professional </span>
                        <span class="slider_txt2">appraiser help you </span>
                        <span class="slider_txt3">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. in voluptate.</span>
                        <a href="#" class="camera_more_btn">Read more</a>
                    </div>
                </div>
            </div>

            <div data-src=@Url.Content("~/Content/images/slide2.jpg")>
                <div class="caption fadeIn">
                    <div class="caption_bg">
                        <span class="slider_txt1">Discover the </span>
                        <span class="slider_txt2 color4">value of your home</span>
                        <span class="slider_txt3 color4">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. in voluptate.</span>
                        <a href="#" class="camera_more_btn v2">Read more</a>
                    </div>
                </div>
            </div>

            <div data-src=@Url.Content("~/Content/images/slide3.jpg")>
                <div class="caption fadeIn">
                    <div class="caption_bg">
                        <span class="slider_txt1">You should know</span>
                        <span class="slider_txt2 color4">the price</span>
                        <span class="slider_txt3 color4">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. in voluptate.</span>
                        <a href="#" class="camera_more_btn v2">Read more</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Answer 1

我解决了我自己的问题。有一个额外的 CSS class 我不小心放在了顶部，导致嵌套的 CSS classes 不再命中。卫生部

为什么 MVC JavaScript 粘性菜单仅在不使用 URL 中的 /controller/action 时有效？

Why does MVC JavaScript Sticky Menu only work when not using /controller/action in URL?

javascript

asp.net-mvc

jquery

menu

slideshow