Links in menu not clickable
I have a menu created in WordPress with dropdown elements. The problem that I have with my menu is that the all the links in it are not clickable and the page doesn't reload. However the links work whenever the JS code is removed, but then I don't have the toggle effect.
Here's an example:
$('li > a').on('click', function(event) {
event.preventDefault()
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').mouseleave(function() {
var thisUI = $(this);
$('html').click(function() {
thisUI.hide();
$('html').unbind('click');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu=menu" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37">
<a href="domain.local">Home</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38">
<a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-1">Submenu 1</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-2">Submenu 2</a></li>
</ul>
</li>
</ul>What am I doing wrong?
javascript
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
add a comment |
I have a menu created in WordPress with dropdown elements. The problem that I have with my menu is that the all the links in it are not clickable and the page doesn't reload. However the links work whenever the JS code is removed, but then I don't have the toggle effect.
Here's an example:
$('li > a').on('click', function(event) {
event.preventDefault()
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').mouseleave(function() {
var thisUI = $(this);
$('html').click(function() {
thisUI.hide();
$('html').unbind('click');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu=menu" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37">
<a href="domain.local">Home</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38">
<a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-1">Submenu 1</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-2">Submenu 2</a></li>
</ul>
</li>
</ul>What am I doing wrong?
javascript
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
3
event.preventDefault()will, as you might expect, prevent the default action. That jumps out as the most likely cause of issues.
– DBS
Nov 19 '18 at 17:20
I agree with @DBS, just removeevent.preventDefault()and everything should work as expected.
– dotconnor
Nov 19 '18 at 17:21
@DBS thank you that worked :)
– Dariusz
Nov 19 '18 at 17:22
add a comment |
I have a menu created in WordPress with dropdown elements. The problem that I have with my menu is that the all the links in it are not clickable and the page doesn't reload. However the links work whenever the JS code is removed, but then I don't have the toggle effect.
Here's an example:
$('li > a').on('click', function(event) {
event.preventDefault()
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').mouseleave(function() {
var thisUI = $(this);
$('html').click(function() {
thisUI.hide();
$('html').unbind('click');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu=menu" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37">
<a href="domain.local">Home</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38">
<a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-1">Submenu 1</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-2">Submenu 2</a></li>
</ul>
</li>
</ul>What am I doing wrong?
javascript
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
I have a menu created in WordPress with dropdown elements. The problem that I have with my menu is that the all the links in it are not clickable and the page doesn't reload. However the links work whenever the JS code is removed, but then I don't have the toggle effect.
Here's an example:
$('li > a').on('click', function(event) {
event.preventDefault()
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').mouseleave(function() {
var thisUI = $(this);
$('html').click(function() {
thisUI.hide();
$('html').unbind('click');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu=menu" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37">
<a href="domain.local">Home</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38">
<a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-1">Submenu 1</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-2">Submenu 2</a></li>
</ul>
</li>
</ul>What am I doing wrong?
$('li > a').on('click', function(event) {
event.preventDefault()
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').mouseleave(function() {
var thisUI = $(this);
$('html').click(function() {
thisUI.hide();
$('html').unbind('click');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu=menu" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37">
<a href="domain.local">Home</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38">
<a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-1">Submenu 1</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-2">Submenu 2</a></li>
</ul>
</li>
</ul>$('li > a').on('click', function(event) {
event.preventDefault()
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').mouseleave(function() {
var thisUI = $(this);
$('html').click(function() {
thisUI.hide();
$('html').unbind('click');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu=menu" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37">
<a href="domain.local">Home</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38">
<a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-1">Submenu 1</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
<a href="domain.local/submenu-2">Submenu 2</a></li>
</ul>
</li>
</ul>javascript
javascript
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
edited Nov 19 '18 at 18:54
Federico Grandi
3,04821229
3,04821229
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
asked Nov 19 '18 at 17:15
DariuszDariusz
6919
6919
3
event.preventDefault()will, as you might expect, prevent the default action. That jumps out as the most likely cause of issues.
– DBS
Nov 19 '18 at 17:20
I agree with @DBS, just removeevent.preventDefault()and everything should work as expected.
– dotconnor
Nov 19 '18 at 17:21
@DBS thank you that worked :)
– Dariusz
Nov 19 '18 at 17:22
add a comment |
3
event.preventDefault()will, as you might expect, prevent the default action. That jumps out as the most likely cause of issues.
– DBS
Nov 19 '18 at 17:20
I agree with @DBS, just removeevent.preventDefault()and everything should work as expected.
– dotconnor
Nov 19 '18 at 17:21
@DBS thank you that worked :)
– Dariusz
Nov 19 '18 at 17:22
3
3
event.preventDefault() will, as you might expect, prevent the default action. That jumps out as the most likely cause of issues.– DBS
Nov 19 '18 at 17:20
event.preventDefault() will, as you might expect, prevent the default action. That jumps out as the most likely cause of issues.– DBS
Nov 19 '18 at 17:20
I agree with @DBS, just remove
event.preventDefault() and everything should work as expected.– dotconnor
Nov 19 '18 at 17:21
I agree with @DBS, just remove
event.preventDefault() and everything should work as expected.– dotconnor
Nov 19 '18 at 17:21
@DBS thank you that worked :)
– Dariusz
Nov 19 '18 at 17:22
@DBS thank you that worked :)
– Dariusz
Nov 19 '18 at 17:22
add a comment |
1 Answer
1
active
oldest
votes
The reason why the links are not clickable, is because in your javascript code you prevented the default behavior by adding: event.preventDefault(). That is also the reason why when you remove the javaScript code, the links suddenly work.
Please read the documentation on event.preventDefault(), or from jQuerys documentation.
Let me know if this helps, or if you have anymore questions.
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379644%2flinks-in-menu-not-clickable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The reason why the links are not clickable, is because in your javascript code you prevented the default behavior by adding: event.preventDefault(). That is also the reason why when you remove the javaScript code, the links suddenly work.
Please read the documentation on event.preventDefault(), or from jQuerys documentation.
Let me know if this helps, or if you have anymore questions.
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
add a comment |
The reason why the links are not clickable, is because in your javascript code you prevented the default behavior by adding: event.preventDefault(). That is also the reason why when you remove the javaScript code, the links suddenly work.
Please read the documentation on event.preventDefault(), or from jQuerys documentation.
Let me know if this helps, or if you have anymore questions.
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
add a comment |
The reason why the links are not clickable, is because in your javascript code you prevented the default behavior by adding: event.preventDefault(). That is also the reason why when you remove the javaScript code, the links suddenly work.
Please read the documentation on event.preventDefault(), or from jQuerys documentation.
Let me know if this helps, or if you have anymore questions.
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
The reason why the links are not clickable, is because in your javascript code you prevented the default behavior by adding: event.preventDefault(). That is also the reason why when you remove the javaScript code, the links suddenly work.
Please read the documentation on event.preventDefault(), or from jQuerys documentation.
Let me know if this helps, or if you have anymore questions.
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
answered Nov 19 '18 at 17:26
Steve CahnSteve Cahn
868
868
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379644%2flinks-in-menu-not-clickable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
event.preventDefault()will, as you might expect, prevent the default action. That jumps out as the most likely cause of issues.– DBS
Nov 19 '18 at 17:20
I agree with @DBS, just remove
event.preventDefault()and everything should work as expected.– dotconnor
Nov 19 '18 at 17:21
@DBS thank you that worked :)
– Dariusz
Nov 19 '18 at 17:22