带有 jQ​​uery 的 Asp Mvc 视图

Posted 2023-05-08

【中文标题】带有 jQ​​uery 的 Asp Mvc 视图

【英文标题】：Asp Mvc views with jQuery

【发布时间】：2021-10-30 05:38:12

【问题描述】：

我有两个视图，每个视图都包含一个带有 data-action 属性的链接，用于调用名为切换菜单的 jQuery 函数，如下所示：

<div id="hide-menu" class="btn-header pull-right">
        <span>
            <a href="javascript:void(0);" class="toggleMenu" data-action="toggleMenu" title="Collapse Menu")">
                <i class="fa fa-reorder"></i>
            </a>
        </span>
    </div>

jQuery:

toggleMenu: function () 
                        if (!$.root_.hasClass("menu-on-top")) 
                            $('html').toggleClass("hidden-menu-mobile-lock");
                            $.root_.toggleClass("hidden-menu");
                            $.root_.removeClass("minified");
                         else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) 
                            $('html').toggleClass("hidden-menu-mobile-lock");
                            $.root_.toggleClass("hidden-menu");
                            $.root_.removeClass("minified");
                        
                    

其中一个视图正确调用了该函数，但另一个没有，这可能是什么原因？？

【问题讨论】：

如果它们不同，它们的工作方式也会不同。您可以使用并排文本比较工具来确定差异。首先删除除菜单之外的所有内容，以确定是否存在其他问题。也许浏览器的控制台中有一些东西，例如，如果您在其中一个页面上错过了<script src=。

我希望他们不是片面的看法。通过执行消除过程，您可以轻松找出导致问题的奇怪因素。

【参考方案1】：

事实上我还不知道问题的真正原因，也许正如 Ramesh 在 cmets 中所说的那样是问题所在。 我通过将函数放在同一个文档中（而不是在另一个 js 文件中）和元素中来解决它，我使用了 onClick 属性来执行函数。

<div id="hide-menu" class="btn-header pull-right">
        <span>
            <a href="javascript:void(0);" class="toggleMenu" onclick="toggle()" title="Collapse Menu">
                <i class="fa fa-reorder"></i>
            </a>
        </span>
</div>

<script>
function toggle() 
                        if (!$.root_.hasClass("menu-on-top")) 
                            $('html').toggleClass("hidden-menu-mobile-lock");
                            $.root_.toggleClass("hidden-menu");
                            $.root_.removeClass("minified");
                         else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) 
                            $('html').toggleClass("hidden-menu-mobile-lock");
                            $.root_.toggleClass("hidden-menu");
                            $.root_.removeClass("minified");
                        
                    
</script>

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。