Question

我有一个连接到可见菜单的隐藏菜单。只要在可见菜单上单击链接，我就需要在隐藏菜单上单击相应的链接。但是，我所尝试的并没有产生任何结果。

$('#visible-menu li:first-child a').click(function() {
  $('#hidden-menu li:first-child a').click();
})

$('#visible-menu li:nth-child(2) a').click(function() {
  $('#hidden-menu li:nth-child(2) a').click();
})

$('#visible-menu li:last-child a').click(function() {
  $('#hidden-menu li:last-child a').click();
})

#hidden-menu {
    list-style-type: none;
}
#hidden-menu li a {
  color: transparent;
}

<ul id="hidden-menu">
  <li><a href="http://facebook.com" target="_blank">Hidden</a></li>
  <li><a href="http://twitter.com" target="_blank">Hidden</a></li>
  <li><a href="http://pinterest.com" target="_blank">Hidden</a></li>
</ul>


<ul id="visible-menu">
  <li><a href="#">Link One</a></li> 
  <li><a href="#">Link Two</a></li>
  <li><a href="#">Link Three</a></li>
</ul>

Answer 1

你需要调用link元素的native click方法，因为你没有绑定jQuery事件处理程序，你可以触发：

$('#visible-menu li:first-child a').click(function () {
    $('#hidden-menu li:first-child a')[0].click();
});

$('#visible-menu li:nth-child(2) a').click(function () {
    $('#hidden-menu li:nth-child(2) a')[0].click();
});

$('#visible-menu li:last-child a').click(function () {
    $('#hidden-menu li:last-child a')[0].click();
});

演示： http://jsfiddle.net/w5x3wt6k/

顺便说一句，如果可见菜单中的项目索引对应于隐藏的项目，则可以缩短代码：

$('#visible-menu li').on('click', 'a', function (e) {
    var index = $(e.delegateTarget).index();
    $('#hidden-menu li:eq(' + index + ') a')[0].click();
});

Answer 2

尝试：

$('#visible-menu li:first-child a').click(function() {
    $('#hidden-menu li:first-child a')[0].click();
})

jQuery单击一个菜单上的链接会触发另一个菜单

2 个答案: