使用jQuery的divs覆盖了目标标头导航下拉列表

时间:2018-06-28 14:37:13

标签: jquery twitter-bootstrap

我似乎无法使用jQuery正确定位下面的菜单按钮。这项工作不应该吗?这是html:

<section id="main-menu" class="navbar-fixed-top" style="z-index: 1000;">
    <div class="container">
        <div class="menu">
            <div class="wrapper">
                <div class="logo">
                    <a class="navbar-brand" href="#"><img src="an image" alt="LOGO"></a>
                </div>
                <!-- START Responsive Menu HTML -->
                <div class="rm-container rm-layout-contracted">
                    <a id="rm-menu-btn" class="rm-toggle rm-button rm-show rm-active" href="#" tabindex="0">
                        Menu
                    </a>

这是JS。

console.log('it works');
jQuery( "a#rm-menu-btn" ).live( "click", function() {
    alert( "Goodbye!" ); 
});

我如何在这么多个div中定位此锚定文本?

1 个答案:

答案 0 :(得分:1)

请改用on方法,在jQuery 1.7版中不推荐使用live()方法,而在1.9版中将其删除。

jQuery( "a#rm-menu-btn" ).on( "click", function() {
  alert( "Goodbye!" ); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="main-menu" class="navbar-fixed-top" style="z-index: 1000;">
	<div class="container">
		<div class="menu">
			<div class="wrapper">
				<div class="logo">
					<a class="navbar-brand" href="#"><img src="an image" alt="LOGO"></a>
				</div>
				<!-- START Responsive Menu HTML -->
				<div class="rm-container rm-layout-contracted">
					<a id="rm-menu-btn"
						class="rm-toggle rm-button rm-show rm-active"
						href="#" tabindex="0">Menu</a>
				</div>
			</div>
		</div>
	</div>
</section>

检查此帖子中添加的代码段,我也为您创建了一支笔,您会发现它here