Question

我希望你能帮助我。我不会撒谎;我是ASP.Net的新手。我忙于一门课程; 在Pluralsight上使用ASP.NET 5，MVC 6，EF7和AngularJS 构建Web应用程序，但无法为我的问题找到解决方案：

我的问题： 似乎jquery适用于某些功能，但不适用于其他功能。它用于更新/更改用户名和菜单警报。崩溃不起作用，改变主块颜色的功能也不起作用（这个特定的功能适用于Firefox中的大约3次测试，但从未在Chrome中使用过。）

项目的一些细节：

我在VS 2015中启动了一个空的ASP.Net 5项目
我已经通过bower.json方法安装了所需的软件包（下图）：

{ ＆＃34; name＆＃34;：＆＃34; ASP.NET＆＃34;，＆＃34;私人＆＃34;：是的，＆＃34;依赖性＆＃34 ;: ＆＃34;下划线＆＃34;：＆＃34; ~1.8.3＆＃34;，＆＃34; jquery＆＃34;：＆＃34; ~2.1.4＆＃34; } }

这是我的index.html代码：

<!DOCTYPE html> <html> <head>   <meta charset="utf-8" />
    <title>The World</title>
    <link href="css/site.css" rel="stylesheet" /> </head> <body>
    <div id="sidebar">
        <img src="img/SamHastings.jpg" alt="headshot" class="headshot" />
        <span id="username">Sam Hastings</span>
        <ul class="menu">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="wrapper">
        <div id="main">
            <div>
                <button id="sidebarToggle">Toggle Menu</button>
            </div>
            <h1>The World</h1>
            <p>This will be a fun website soon!</p>
            <form>
               <div>
                    <label>Date</label>
                    <input />
                </div>
                <div>
                    <label>Location</label>
                    <input />
                </div>
                <div><input type="submit" value="Add" /></div>
            </form>
        </div>
        <div id="footer">
            © 2015 The World Ltd.
        </div>
    </div>
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="js/site.js"></script> </body> </html>

这是我的site.js代码：

  var ele = $("#username");
    ele.text("Corne le Roux");
    var main = $("#main");
    main.on("mouseenter", function () {
        main.style = "background-color: #888;";
    });

    main.on("mouseleave", function () {
        main.style = "";
    });

    var menuItems = $("ul.menu li a");
    menuItems.on("click", function () {
        var me = $(this);
        alert(me.text());
    });

    var sidebarAndWrapper = $("#sidebar,#wrapper");
    $("sidebarToggle").on("click", function () {
        sidebarAndWrapper.toggleClass("hide-sidebar");
        if (sidebarAndWrapper.hasClass("hide-sidebar")) {
            $(this).text("Show Sidebar");
        } else {
            $(this).text("Hide Sidebar");
        }   
    });    
})();

这是我的css：

#sidebar {
    background: #2a2c36;
    color: #eee;
    position: fixed;
    height: 100%;
    width: 250px;
    overflow: hidden;
    left: 0;
    margin: 0;
    -moz-transition: left ease .25s;
    -o-transition: left ease .25s;
    -webkit-transition: left ease .25s;
    transition: left ease .25s;
}
    #sidebar.hide-sidebar {
        left: -250px;
        -moz-transition: left ease .25s;
        -o-transition: left ease .25s;
        -webkit-transition: left ease .25s;
        transition: left ease .25s;
    }
#wrapper {
    margin: 0 0 0 250px;
    -moz-transition: margin-left ease .25s;
    -o-transition: margin-left ease .25s;
    -webkit-transition: margin-left ease .25s;
    transition: margin-left ease .25s;
}
    #wrapper.hide-sidebar {
        margin-left: 0;
        -moz-transition: margin-left ease .25s;
        -o-transition: margin-left ease .25s;
        -webkit-transition: margin-left ease .25s;
        transition: margin-left ease .25s;
    }

我提前谢谢你了！

Answer 1

您好我按照相同的教程，我解决了这个问题：

 var main = $("#main");
main.on("mouseenter", function () {
    main.css("background-color", "#888");
});

main.on("mouseleave", function () {
    main.css("background-color", "");
});

并非所有jquery函数都有效

1 个答案: