Mixing
making jquery for a dropdown menu
0
I'm working with Bootstrap 4 and navbars always need 2 clicks for open the dropdown menues so I want to manage it with jquery...
The navbar looks like this:
<nav class="navbar fixed-top navbar-dark navbar-expand-sm" id="cssmenu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="basicExampleNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="homeb.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="elements" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Elements</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="elements">
<a class="dropdown-item" href="element1.html">Element1</a>
<a class="dropdown-item" href="element2.html">Element2</a>
<a class="dropdown-item" href="element3.html">Element3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="options" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Options</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="options">
<a class="dropdown-item" href="option1.html">Option1</a>
<a class="dropdown-item" href="otion2.html">Option2</a>
</div>
</li>
</ul>
</nav>
And I m trying with something like this but I cant make it work...
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
$(".dropdown-item").on("click", function() {
});
And the problems are that, in the first part, it works but open all dropdowns, not only the one that I've clicked on it. And in the second part, I need to do the same $(".dropdown-menu").toggle(); I guess but again, only for the one I opened.
Someone please could help me?
Thanks.
jquery dropdown
asked Nov 20 '18 at 23:22
LeandroLeandro
266
add a comment |
0
I'm working with Bootstrap 4 and navbars always need 2 clicks for open the dropdown menues so I want to manage it with jquery...
The navbar looks like this:
<nav class="navbar fixed-top navbar-dark navbar-expand-sm" id="cssmenu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="basicExampleNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="homeb.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="elements" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Elements</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="elements">
<a class="dropdown-item" href="element1.html">Element1</a>
<a class="dropdown-item" href="element2.html">Element2</a>
<a class="dropdown-item" href="element3.html">Element3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="options" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Options</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="options">
<a class="dropdown-item" href="option1.html">Option1</a>
<a class="dropdown-item" href="otion2.html">Option2</a>
</div>
</li>
</ul>
</nav>
And I m trying with something like this but I cant make it work...
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
$(".dropdown-item").on("click", function() {
});
And the problems are that, in the first part, it works but open all dropdowns, not only the one that I've clicked on it. And in the second part, I need to do the same $(".dropdown-menu").toggle(); I guess but again, only for the one I opened.
Someone please could help me?
Thanks.
jquery dropdown
asked Nov 20 '18 at 23:22
LeandroLeandro
266
Your markup works with one click without any additional javascript, perhaps there is something else on the page interfering with it? codepen.io/pabbott/pen/oQporZ
– Paul Abbott
Nov 20 '18 at 23:43
You also didn't closebasicExampleNav
– Paul Abbott
Nov 20 '18 at 23:46
add a comment |
0
0
0
I'm working with Bootstrap 4 and navbars always need 2 clicks for open the dropdown menues so I want to manage it with jquery...
The navbar looks like this:
<nav class="navbar fixed-top navbar-dark navbar-expand-sm" id="cssmenu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="basicExampleNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="homeb.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="elements" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Elements</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="elements">
<a class="dropdown-item" href="element1.html">Element1</a>
<a class="dropdown-item" href="element2.html">Element2</a>
<a class="dropdown-item" href="element3.html">Element3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="options" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Options</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="options">
<a class="dropdown-item" href="option1.html">Option1</a>
<a class="dropdown-item" href="otion2.html">Option2</a>
</div>
</li>
</ul>
</nav>
And I m trying with something like this but I cant make it work...
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
$(".dropdown-item").on("click", function() {
});
And the problems are that, in the first part, it works but open all dropdowns, not only the one that I've clicked on it. And in the second part, I need to do the same $(".dropdown-menu").toggle(); I guess but again, only for the one I opened.
Someone please could help me?
Thanks.
jquery dropdown
asked Nov 20 '18 at 23:22
LeandroLeandro
266
I'm working with Bootstrap 4 and navbars always need 2 clicks for open the dropdown menues so I want to manage it with jquery...
The navbar looks like this:
<nav class="navbar fixed-top navbar-dark navbar-expand-sm" id="cssmenu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="basicExampleNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="homeb.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="elements" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Elements</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="elements">
<a class="dropdown-item" href="element1.html">Element1</a>
<a class="dropdown-item" href="element2.html">Element2</a>
<a class="dropdown-item" href="element3.html">Element3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="options" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Options</a>
<div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="options">
<a class="dropdown-item" href="option1.html">Option1</a>
<a class="dropdown-item" href="otion2.html">Option2</a>
</div>
</li>
</ul>
</nav>
And I m trying with something like this but I cant make it work...
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
$(".dropdown-item").on("click", function() {
});
And the problems are that, in the first part, it works but open all dropdowns, not only the one that I've clicked on it. And in the second part, I need to do the same $(".dropdown-menu").toggle(); I guess but again, only for the one I opened.
Someone please could help me?
Thanks.
jquery dropdown
jquery dropdown
asked Nov 20 '18 at 23:22
LeandroLeandro
266
asked Nov 20 '18 at 23:22
LeandroLeandro
266
asked Nov 20 '18 at 23:22
LeandroLeandro
266
asked Nov 20 '18 at 23:22
LeandroLeandro
266
asked Nov 20 '18 at 23:22
LeandroLeandro
266
266
Your markup works with one click without any additional javascript, perhaps there is something else on the page interfering with it? codepen.io/pabbott/pen/oQporZ
– Paul Abbott
Nov 20 '18 at 23:43
You also didn't closebasicExampleNav
– Paul Abbott
Nov 20 '18 at 23:46
add a comment |
Your markup works with one click without any additional javascript, perhaps there is something else on the page interfering with it? codepen.io/pabbott/pen/oQporZ
– Paul Abbott
Nov 20 '18 at 23:43
You also didn't closebasicExampleNav
– Paul Abbott
Nov 20 '18 at 23:46
Your markup works with one click without any additional javascript, perhaps there is something else on the page interfering with it? codepen.io/pabbott/pen/oQporZ
– Paul Abbott
Nov 20 '18 at 23:43
Your markup works with one click without any additional javascript, perhaps there is something else on the page interfering with it? codepen.io/pabbott/pen/oQporZ
– Paul Abbott
Nov 20 '18 at 23:43
You also didn't close
basicExampleNav– Paul Abbott
Nov 20 '18 at 23:46
You also didn't close
basicExampleNav– Paul Abbott
Nov 20 '18 at 23:46
add a comment |
2 Answers
2
active
oldest
votes
0
Try this...
$(".dropdown-toggle").on("click", function() {
$(this).parent().find(".dropdown-menu").toggle();
});
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
add a comment |
0
Change the class to id:
This
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
To This:
$("#specific_button_id").on("click", function() {
$(".dropdown-menu").toggle();
});
A class applied to all in the document where it mentioned and Id is for a specific task.
Hope you find it helpful. :)
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
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
});
}
});
draft saved
draft discarded
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%2f53403112%2fmaking-jquery-for-a-dropdown-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try this...
$(".dropdown-toggle").on("click", function() {
$(this).parent().find(".dropdown-menu").toggle();
});
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
add a comment |
0
Try this...
$(".dropdown-toggle").on("click", function() {
$(this).parent().find(".dropdown-menu").toggle();
});
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
add a comment |
0
0
0
Try this...
$(".dropdown-toggle").on("click", function() {
$(this).parent().find(".dropdown-menu").toggle();
});
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
Try this...
$(".dropdown-toggle").on("click", function() {
$(this).parent().find(".dropdown-menu").toggle();
});
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
answered Nov 21 '18 at 3:37
Sooriya DasanayakeSooriya Dasanayake
9121411
9121411
add a comment |
add a comment |
0
Change the class to id:
This
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
To This:
$("#specific_button_id").on("click", function() {
$(".dropdown-menu").toggle();
});
A class applied to all in the document where it mentioned and Id is for a specific task.
Hope you find it helpful. :)
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
add a comment |
0
Change the class to id:
This
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
To This:
$("#specific_button_id").on("click", function() {
$(".dropdown-menu").toggle();
});
A class applied to all in the document where it mentioned and Id is for a specific task.
Hope you find it helpful. :)
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
add a comment |
0
0
0
Change the class to id:
This
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
To This:
$("#specific_button_id").on("click", function() {
$(".dropdown-menu").toggle();
});
A class applied to all in the document where it mentioned and Id is for a specific task.
Hope you find it helpful. :)
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
Change the class to id:
This
$(".dropdown-toggle").on("click", function() {
$(".dropdown-menu").toggle();
});
To This:
$("#specific_button_id").on("click", function() {
$(".dropdown-menu").toggle();
});
A class applied to all in the document where it mentioned and Id is for a specific task.
Hope you find it helpful. :)
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
answered Nov 20 '18 at 23:49
Majid LiaquatMajid Liaquat
18
18
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53403112%2fmaking-jquery-for-a-dropdown-menu%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
Your markup works with one click without any additional javascript, perhaps there is something else on the page interfering with it? codepen.io/pabbott/pen/oQporZ
– Paul Abbott
Nov 20 '18 at 23:43
You also didn't close
basicExampleNav– Paul Abbott
Nov 20 '18 at 23:46