我正在尝试创建一个相当简单的向下钻取菜单,以使用 jQuery 中的 $.get()
将一些页面加载到 div 中。除一个问题外,一切都按预期工作。通过 $.get()
调用成功加载 HTML 后,单击事件列表项中链接以外的主钻取链接会导致 #menu-list
通过 display: none;
隐藏。我确定我在这里遗漏了一些非常简单的东西,但我似乎无法发现错误。
这是我的HTML:
<div id="menu-container">
<ul id="menu-list">
<li class="main-drill">
<a href="/somepage">Main Drill 1</a>
</li>
<li class="main-drill">
<a href="#">Main Drill 2</a>
<ul>
<li class="sub-drill"><a href="/somepage">Sub Drill 1</a></li>
<li class="sub-drill"><a href="/somepage">Sub Drill 2</a></li>
<li class="sub-drill"><a href="/somepage">Sub Drill 3</a></li>
</ul>
</li>
<li class="main-drill">
<a href="#">Main Drill 3</a>
<ul>
<li class="sub-drill"><a href="/somepage">Sub Drill 1</a></li>
<li class="sub-drill"><a href="/somepage">Sub Drill 2</a></li>
<li class="sub-drill"><a href="/somepage">Sub Drill 3</a></li>
</ul>
</li>
</ul>
</div>
<div id="main-content">
The main HTML content is displayed here.
</div>
我的 jQuery 代码:
$('#menu-container > ul > li > a').live('click', function(e) {
var url = $(this).attr('href');
if (url == '#') {
var parentElement = $(this).parent();
var checkElement = $(this).next();
$('#menu-container li').removeClass('active');
$(this).closest('li').addClass('active');
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
parentElement.children('ul').slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu-container ul ul:visible').slideUp('normal');
parentElement.children('ul').slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
}
});
$('#menu-container > ul > li > ul > li > a').live('click', function (e) {
e.preventDefault();
var url = $(this).attr('href');
$.get(url, function (response) {
$('#main-content').html(response);
});
});
最佳答案
因为你是动态添加元素,试试这个:
$(document).on('click','#menu-container > ul > li > a',function() {
//code
});
这是 AJAX 加载内容的常见问题,因为旧的处理程序不再适用于动态添加的内容,除非您使用事件委托(delegate),如上所示。
此外,不要使用 document,而是为 #menu-container > ul > li > a 的关闭父元素使用选择器。
关于jquery - 在 $.get() 之后点击隐藏 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20929328/