这是我的 html 代码:
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>The Dropdown</span>
<ul class="dropdown">
<li>@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
<li>@Html.ActionLink("Company Information", "Details", "Employer",routeValues: new {id = Model.ID },htmlAttributes: null)</li>
<li>@Html.ActionLink("Post Opening", "Create", "Opening")</li>
<li>@Html.ActionLink("View Opening", "Details", "Opening")</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</div>
我的示例 jquery 代码来自:
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
//show dropdown items on click
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
});
obj.opts.on('click', function () {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
问题:该代码的工作方式类似于静态 href 代码,但它有一个有效的 anchor 链接可供导航。我怎样才能让它工作?
最佳答案
我已经能够让它工作了。所需要做的就是添加 event.stopPropagation()。 这是唯一需要修复的部分:
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
event.stopPropagation();
//return false;
...
关于javascript - 使用 jquery 的下拉导航链接未在 mvc 中加载有效的 anchor 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44289027/