jQuery clicking a link on one menu triggers click on another menu

Question

I have a hidden menu that is connected to a visible menu. Whenever a link is clicked on the visible menu, I need that corresponding link clicked on the hidden menu. However, what I have tried is not producing any results.

$('#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>

Try using .trigger('click') instead. like: $('#hidden-menu li:last-child a').trigger('click'); — Nabbit, Jun 09 '15 at 20:56

dfsq · Accepted Answer · 2015-06-09T21:01:21.417

2

You need to call native click method of the link element, since you don't bind jQuery event handlers you can trigger:

$('#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();
});

Demo: http://jsfiddle.net/w5x3wt6k/

Btw, you can shorten your code if items indexes from visible menu correspond to hidden ones:

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

edited Jun 09 '15 at 21:01

answered Jun 09 '15 at 20:55

dfsq

191,768
25
236
258

nice. but really don't understand the need for [0]. I thought it was only useful when dealing with arrays. – Claudiu Creanga Jun 09 '15 at 21:01
1

@Claudiu in jQuery `$("selector")` *will* return an Array of Object Elements :) the difference is the way the JS's native `.click()` method works and the jQuery's `.click()` which are slightly different. http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick – Roko C. Buljan Jun 09 '15 at 21:02
Fantastic answer especially with the example on how to shorten the code. – Mr.Smithyyy Jun 09 '15 at 21:03
1

@Claudiu `$('#hidden-menu li:first-child a')` is a jQuery object, which is an array-like object collection. It looks basically like `{0: HTMLElement, 1: HTMLElement, length: 2, otherProps: ...}`. With `[0]` you access property with key `0` from this collection, and this property under this key is DOM element object which you can use to invoke its native methods. – dfsq Jun 09 '15 at 21:04
@Claudiu instead uf using bracket `[index]` to retrieve that Array Key El Object, jQuery provides you with `.get(index)` so it looks like: `$('selector').get(0).click();` entirely up to you, and code-optimization. – Roko C. Buljan Jun 09 '15 at 21:05

score 1 · Answer 2 · answered Jun 09 '15 at 20:55

1

Try with:

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

answered Jun 09 '15 at 20:55

user3449225

36
4

jQuery clicking a link on one menu triggers click on another menu

2 Answers2