CODEWITHSUNDEEP
jquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

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

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>

Upvotes: 2

Views: 1062

Answers (2)

dfsq
dfsq

Reputation: 193261

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

Upvotes: 2

user3449225
user3449225

Reputation: 36

Try with:

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

Upvotes: 1

Related Questions