Navigation Menu JQuery Problems
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I have two problems:
- Regarding the "detected" css class, if you click another list element before the animation which displays the element's drop-down contents has completed, the element's dropdown contents will appear, however, the wrong list element will be highlighted. This is my attempt at creating what is known as an "active" class to clarify which list element's dropdown contents are being displayed. How do I ensure that whichever list element is highlighted/selected, the correct dropdown contents are displayed?
- Upon the initial loading of the page, or refreshing, a list element and its dropdown contents are highlighted and displayed although the user has not selected them. How do I ensure that upon loading the page, no list element or its dropdown contents are displayed until a list element is clicked?
Thank you.
$(function()
$('#nav .nav-ul li').on('click', function ()
//control selected nav li's css
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
$('.substitute .sub-child.active').hide(416, function()
$(this).removeClass('active');
$('#'+ulToShow).fadeIn(528, function()
$(this).addClass('active');
);
);
);
);*
margin: 0;
padding: 0;
#nav
background-color: /*blue*/;
float: right;
#nav .nav-ul
list-style: none;
float: right;
background-color: /*yellow*/;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
/*transform: skewX(-20deg);*/
#nav .nav-ul li
float: left;
padding: 4px;
/*transform: skewX(20deg);*/
font-weight: bold;
color: #000000;
#nav .nav-ul li:hover
cursor: pointer;
text-decoration: underline;
color: #E51D27;
#nav .nav-ul li.detected
color: #E51D27;
#nav .substitute
float: right;
background-color: /*pink*/;
margin-right: 4px;
#nav .substitute .sub-child
float: left;
display: none;
#nav .substitute .sub-child.active
display: block;
#nav .substitute .sub-child ul
list-style: none;
#nav .substitute .sub-child ul li
float: left;
padding: 4px;
<div id="nav">
<ul class="nav-ul">
<li class="detected" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child active">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>javascript jquery html css
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
add a comment |
0
I have two problems:
- Regarding the "detected" css class, if you click another list element before the animation which displays the element's drop-down contents has completed, the element's dropdown contents will appear, however, the wrong list element will be highlighted. This is my attempt at creating what is known as an "active" class to clarify which list element's dropdown contents are being displayed. How do I ensure that whichever list element is highlighted/selected, the correct dropdown contents are displayed?
- Upon the initial loading of the page, or refreshing, a list element and its dropdown contents are highlighted and displayed although the user has not selected them. How do I ensure that upon loading the page, no list element or its dropdown contents are displayed until a list element is clicked?
Thank you.
$(function()
$('#nav .nav-ul li').on('click', function ()
//control selected nav li's css
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
$('.substitute .sub-child.active').hide(416, function()
$(this).removeClass('active');
$('#'+ulToShow).fadeIn(528, function()
$(this).addClass('active');
);
);
);
);*
margin: 0;
padding: 0;
#nav
background-color: /*blue*/;
float: right;
#nav .nav-ul
list-style: none;
float: right;
background-color: /*yellow*/;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
/*transform: skewX(-20deg);*/
#nav .nav-ul li
float: left;
padding: 4px;
/*transform: skewX(20deg);*/
font-weight: bold;
color: #000000;
#nav .nav-ul li:hover
cursor: pointer;
text-decoration: underline;
color: #E51D27;
#nav .nav-ul li.detected
color: #E51D27;
#nav .substitute
float: right;
background-color: /*pink*/;
margin-right: 4px;
#nav .substitute .sub-child
float: left;
display: none;
#nav .substitute .sub-child.active
display: block;
#nav .substitute .sub-child ul
list-style: none;
#nav .substitute .sub-child ul li
float: left;
padding: 4px;
<div id="nav">
<ul class="nav-ul">
<li class="detected" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child active">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>javascript jquery html css
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
add a comment |
0
0
0
I have two problems:
- Regarding the "detected" css class, if you click another list element before the animation which displays the element's drop-down contents has completed, the element's dropdown contents will appear, however, the wrong list element will be highlighted. This is my attempt at creating what is known as an "active" class to clarify which list element's dropdown contents are being displayed. How do I ensure that whichever list element is highlighted/selected, the correct dropdown contents are displayed?
- Upon the initial loading of the page, or refreshing, a list element and its dropdown contents are highlighted and displayed although the user has not selected them. How do I ensure that upon loading the page, no list element or its dropdown contents are displayed until a list element is clicked?
Thank you.
$(function()
$('#nav .nav-ul li').on('click', function ()
//control selected nav li's css
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
$('.substitute .sub-child.active').hide(416, function()
$(this).removeClass('active');
$('#'+ulToShow).fadeIn(528, function()
$(this).addClass('active');
);
);
);
);*
margin: 0;
padding: 0;
#nav
background-color: /*blue*/;
float: right;
#nav .nav-ul
list-style: none;
float: right;
background-color: /*yellow*/;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
/*transform: skewX(-20deg);*/
#nav .nav-ul li
float: left;
padding: 4px;
/*transform: skewX(20deg);*/
font-weight: bold;
color: #000000;
#nav .nav-ul li:hover
cursor: pointer;
text-decoration: underline;
color: #E51D27;
#nav .nav-ul li.detected
color: #E51D27;
#nav .substitute
float: right;
background-color: /*pink*/;
margin-right: 4px;
#nav .substitute .sub-child
float: left;
display: none;
#nav .substitute .sub-child.active
display: block;
#nav .substitute .sub-child ul
list-style: none;
#nav .substitute .sub-child ul li
float: left;
padding: 4px;
<div id="nav">
<ul class="nav-ul">
<li class="detected" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child active">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>javascript jquery html css
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
I have two problems:
- Regarding the "detected" css class, if you click another list element before the animation which displays the element's drop-down contents has completed, the element's dropdown contents will appear, however, the wrong list element will be highlighted. This is my attempt at creating what is known as an "active" class to clarify which list element's dropdown contents are being displayed. How do I ensure that whichever list element is highlighted/selected, the correct dropdown contents are displayed?
- Upon the initial loading of the page, or refreshing, a list element and its dropdown contents are highlighted and displayed although the user has not selected them. How do I ensure that upon loading the page, no list element or its dropdown contents are displayed until a list element is clicked?
Thank you.
$(function()
$('#nav .nav-ul li').on('click', function ()
//control selected nav li's css
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
$('.substitute .sub-child.active').hide(416, function()
$(this).removeClass('active');
$('#'+ulToShow).fadeIn(528, function()
$(this).addClass('active');
);
);
);
);*
margin: 0;
padding: 0;
#nav
background-color: /*blue*/;
float: right;
#nav .nav-ul
list-style: none;
float: right;
background-color: /*yellow*/;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
/*transform: skewX(-20deg);*/
#nav .nav-ul li
float: left;
padding: 4px;
/*transform: skewX(20deg);*/
font-weight: bold;
color: #000000;
#nav .nav-ul li:hover
cursor: pointer;
text-decoration: underline;
color: #E51D27;
#nav .nav-ul li.detected
color: #E51D27;
#nav .substitute
float: right;
background-color: /*pink*/;
margin-right: 4px;
#nav .substitute .sub-child
float: left;
display: none;
#nav .substitute .sub-child.active
display: block;
#nav .substitute .sub-child ul
list-style: none;
#nav .substitute .sub-child ul li
float: left;
padding: 4px;
<div id="nav">
<ul class="nav-ul">
<li class="detected" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child active">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>$(function()
$('#nav .nav-ul li').on('click', function ()
//control selected nav li's css
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
$('.substitute .sub-child.active').hide(416, function()
$(this).removeClass('active');
$('#'+ulToShow).fadeIn(528, function()
$(this).addClass('active');
);
);
);
);*
margin: 0;
padding: 0;
#nav
background-color: /*blue*/;
float: right;
#nav .nav-ul
list-style: none;
float: right;
background-color: /*yellow*/;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
/*transform: skewX(-20deg);*/
#nav .nav-ul li
float: left;
padding: 4px;
/*transform: skewX(20deg);*/
font-weight: bold;
color: #000000;
#nav .nav-ul li:hover
cursor: pointer;
text-decoration: underline;
color: #E51D27;
#nav .nav-ul li.detected
color: #E51D27;
#nav .substitute
float: right;
background-color: /*pink*/;
margin-right: 4px;
#nav .substitute .sub-child
float: left;
display: none;
#nav .substitute .sub-child.active
display: block;
#nav .substitute .sub-child ul
list-style: none;
#nav .substitute .sub-child ul li
float: left;
padding: 4px;
<div id="nav">
<ul class="nav-ul">
<li class="detected" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child active">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>$(function()
$('#nav .nav-ul li').on('click', function ()
//control selected nav li's css
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
$('.substitute .sub-child.active').hide(416, function()
$(this).removeClass('active');
$('#'+ulToShow).fadeIn(528, function()
$(this).addClass('active');
);
);
);
);*
margin: 0;
padding: 0;
#nav
background-color: /*blue*/;
float: right;
#nav .nav-ul
list-style: none;
float: right;
background-color: /*yellow*/;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
/*transform: skewX(-20deg);*/
#nav .nav-ul li
float: left;
padding: 4px;
/*transform: skewX(20deg);*/
font-weight: bold;
color: #000000;
#nav .nav-ul li:hover
cursor: pointer;
text-decoration: underline;
color: #E51D27;
#nav .nav-ul li.detected
color: #E51D27;
#nav .substitute
float: right;
background-color: /*pink*/;
margin-right: 4px;
#nav .substitute .sub-child
float: left;
display: none;
#nav .substitute .sub-child.active
display: block;
#nav .substitute .sub-child ul
list-style: none;
#nav .substitute .sub-child ul li
float: left;
padding: 4px;
<div id="nav">
<ul class="nav-ul">
<li class="detected" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child active">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>javascript jquery html css
javascript jquery html css
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
edited Nov 14 '18 at 0:28
Jack Bashford
15.8k31848
15.8k31848
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
asked Nov 14 '18 at 0:20
Daniel JohnsonDaniel Johnson
455
455
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
There could be many ways to do it. I chose the JQuery way since you already are using it. For the first problem, I simply removed the click handler on the links while your animation was working, and added it back once the animation completed. This way, there is no effect of intermediate clicks when the animation is running. There could be other ways to do it, but thats the concept I usually use to enable/disable items when I have animations running.
For the second problem, I removed the active and the detected classes from the initial DOM and added logic to check if there is nothing active then only run the fade in animation, otherwise run both fade out and fade in.
There is some duplicity in the code, so I would recommend creating functions and refactoring this, but it should give you the idea.
Seems to be working fine. Updated fiddle here: https://jsfiddle.net/bm7qoe3k/1/
Hope this helps.
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
For the second problem, when you click one list element and then click another one rapidly, the content from one list element gets appended to end of the selected element. Barring that issue, it appears you fixed the original issue.
– Daniel Johnson
Nov 14 '18 at 1:05
@DanielJohnson see updated fiddle above in the answer or here: jsfiddle.net/bm7qoe3k/1
– Gurtej Singh
Nov 14 '18 at 1:09
Gotcha, I think I'm understanding what you did - I'll look over it more to figure it out. Last question, how I would I add that in the event of a click off of the nav menu, the dropdown content would retract, and the highlighted elements would go unhighlighted?
– Daniel Johnson
Nov 14 '18 at 1:13
1
@DanielJohnson If I understand you correctly, you want to simulate an off animation of an already selected nav item. You would need to detect if the click is somehow on the same item as the selected item and then only run the animation for deselection. Hope that makes sense?
– Gurtej Singh
Nov 14 '18 at 1:16
Gotcha, thanks for steering me in the right direction.
– Daniel Johnson
Nov 14 '18 at 1: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%2f53291389%2fnavigation-menu-jquery-problems%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
0
There could be many ways to do it. I chose the JQuery way since you already are using it. For the first problem, I simply removed the click handler on the links while your animation was working, and added it back once the animation completed. This way, there is no effect of intermediate clicks when the animation is running. There could be other ways to do it, but thats the concept I usually use to enable/disable items when I have animations running.
For the second problem, I removed the active and the detected classes from the initial DOM and added logic to check if there is nothing active then only run the fade in animation, otherwise run both fade out and fade in.
There is some duplicity in the code, so I would recommend creating functions and refactoring this, but it should give you the idea.
Seems to be working fine. Updated fiddle here: https://jsfiddle.net/bm7qoe3k/1/
Hope this helps.
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
For the second problem, when you click one list element and then click another one rapidly, the content from one list element gets appended to end of the selected element. Barring that issue, it appears you fixed the original issue.
– Daniel Johnson
Nov 14 '18 at 1:05
@DanielJohnson see updated fiddle above in the answer or here: jsfiddle.net/bm7qoe3k/1
– Gurtej Singh
Nov 14 '18 at 1:09
Gotcha, I think I'm understanding what you did - I'll look over it more to figure it out. Last question, how I would I add that in the event of a click off of the nav menu, the dropdown content would retract, and the highlighted elements would go unhighlighted?
– Daniel Johnson
Nov 14 '18 at 1:13
1
@DanielJohnson If I understand you correctly, you want to simulate an off animation of an already selected nav item. You would need to detect if the click is somehow on the same item as the selected item and then only run the animation for deselection. Hope that makes sense?
– Gurtej Singh
Nov 14 '18 at 1:16
Gotcha, thanks for steering me in the right direction.
– Daniel Johnson
Nov 14 '18 at 1:18
add a comment |
0
There could be many ways to do it. I chose the JQuery way since you already are using it. For the first problem, I simply removed the click handler on the links while your animation was working, and added it back once the animation completed. This way, there is no effect of intermediate clicks when the animation is running. There could be other ways to do it, but thats the concept I usually use to enable/disable items when I have animations running.
For the second problem, I removed the active and the detected classes from the initial DOM and added logic to check if there is nothing active then only run the fade in animation, otherwise run both fade out and fade in.
There is some duplicity in the code, so I would recommend creating functions and refactoring this, but it should give you the idea.
Seems to be working fine. Updated fiddle here: https://jsfiddle.net/bm7qoe3k/1/
Hope this helps.
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
For the second problem, when you click one list element and then click another one rapidly, the content from one list element gets appended to end of the selected element. Barring that issue, it appears you fixed the original issue.
– Daniel Johnson
Nov 14 '18 at 1:05
@DanielJohnson see updated fiddle above in the answer or here: jsfiddle.net/bm7qoe3k/1
– Gurtej Singh
Nov 14 '18 at 1:09
Gotcha, I think I'm understanding what you did - I'll look over it more to figure it out. Last question, how I would I add that in the event of a click off of the nav menu, the dropdown content would retract, and the highlighted elements would go unhighlighted?
– Daniel Johnson
Nov 14 '18 at 1:13
1
@DanielJohnson If I understand you correctly, you want to simulate an off animation of an already selected nav item. You would need to detect if the click is somehow on the same item as the selected item and then only run the animation for deselection. Hope that makes sense?
– Gurtej Singh
Nov 14 '18 at 1:16
Gotcha, thanks for steering me in the right direction.
– Daniel Johnson
Nov 14 '18 at 1:18
add a comment |
0
0
0
There could be many ways to do it. I chose the JQuery way since you already are using it. For the first problem, I simply removed the click handler on the links while your animation was working, and added it back once the animation completed. This way, there is no effect of intermediate clicks when the animation is running. There could be other ways to do it, but thats the concept I usually use to enable/disable items when I have animations running.
For the second problem, I removed the active and the detected classes from the initial DOM and added logic to check if there is nothing active then only run the fade in animation, otherwise run both fade out and fade in.
There is some duplicity in the code, so I would recommend creating functions and refactoring this, but it should give you the idea.
Seems to be working fine. Updated fiddle here: https://jsfiddle.net/bm7qoe3k/1/
Hope this helps.
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
There could be many ways to do it. I chose the JQuery way since you already are using it. For the first problem, I simply removed the click handler on the links while your animation was working, and added it back once the animation completed. This way, there is no effect of intermediate clicks when the animation is running. There could be other ways to do it, but thats the concept I usually use to enable/disable items when I have animations running.
For the second problem, I removed the active and the detected classes from the initial DOM and added logic to check if there is nothing active then only run the fade in animation, otherwise run both fade out and fade in.
There is some duplicity in the code, so I would recommend creating functions and refactoring this, but it should give you the idea.
Seems to be working fine. Updated fiddle here: https://jsfiddle.net/bm7qoe3k/1/
Hope this helps.
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
edited Nov 14 '18 at 1:08
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
answered Nov 14 '18 at 0:42
Gurtej SinghGurtej Singh
2,6361624
2,6361624
For the second problem, when you click one list element and then click another one rapidly, the content from one list element gets appended to end of the selected element. Barring that issue, it appears you fixed the original issue.
– Daniel Johnson
Nov 14 '18 at 1:05
@DanielJohnson see updated fiddle above in the answer or here: jsfiddle.net/bm7qoe3k/1
– Gurtej Singh
Nov 14 '18 at 1:09
Gotcha, I think I'm understanding what you did - I'll look over it more to figure it out. Last question, how I would I add that in the event of a click off of the nav menu, the dropdown content would retract, and the highlighted elements would go unhighlighted?
– Daniel Johnson
Nov 14 '18 at 1:13
1
@DanielJohnson If I understand you correctly, you want to simulate an off animation of an already selected nav item. You would need to detect if the click is somehow on the same item as the selected item and then only run the animation for deselection. Hope that makes sense?
– Gurtej Singh
Nov 14 '18 at 1:16
Gotcha, thanks for steering me in the right direction.
– Daniel Johnson
Nov 14 '18 at 1:18
add a comment |
For the second problem, when you click one list element and then click another one rapidly, the content from one list element gets appended to end of the selected element. Barring that issue, it appears you fixed the original issue.
– Daniel Johnson
Nov 14 '18 at 1:05
@DanielJohnson see updated fiddle above in the answer or here: jsfiddle.net/bm7qoe3k/1
– Gurtej Singh
Nov 14 '18 at 1:09
Gotcha, I think I'm understanding what you did - I'll look over it more to figure it out. Last question, how I would I add that in the event of a click off of the nav menu, the dropdown content would retract, and the highlighted elements would go unhighlighted?
– Daniel Johnson
Nov 14 '18 at 1:13
1
@DanielJohnson If I understand you correctly, you want to simulate an off animation of an already selected nav item. You would need to detect if the click is somehow on the same item as the selected item and then only run the animation for deselection. Hope that makes sense?
– Gurtej Singh
Nov 14 '18 at 1:16
Gotcha, thanks for steering me in the right direction.
– Daniel Johnson
Nov 14 '18 at 1:18
For the second problem, when you click one list element and then click another one rapidly, the content from one list element gets appended to end of the selected element. Barring that issue, it appears you fixed the original issue.
– Daniel Johnson
Nov 14 '18 at 1:05
For the second problem, when you click one list element and then click another one rapidly, the content from one list element gets appended to end of the selected element. Barring that issue, it appears you fixed the original issue.
– Daniel Johnson
Nov 14 '18 at 1:05
@DanielJohnson see updated fiddle above in the answer or here: jsfiddle.net/bm7qoe3k/1
– Gurtej Singh
Nov 14 '18 at 1:09
@DanielJohnson see updated fiddle above in the answer or here: jsfiddle.net/bm7qoe3k/1
– Gurtej Singh
Nov 14 '18 at 1:09
Gotcha, I think I'm understanding what you did - I'll look over it more to figure it out. Last question, how I would I add that in the event of a click off of the nav menu, the dropdown content would retract, and the highlighted elements would go unhighlighted?
– Daniel Johnson
Nov 14 '18 at 1:13
Gotcha, I think I'm understanding what you did - I'll look over it more to figure it out. Last question, how I would I add that in the event of a click off of the nav menu, the dropdown content would retract, and the highlighted elements would go unhighlighted?
– Daniel Johnson
Nov 14 '18 at 1:13
1
1
@DanielJohnson If I understand you correctly, you want to simulate an off animation of an already selected nav item. You would need to detect if the click is somehow on the same item as the selected item and then only run the animation for deselection. Hope that makes sense?
– Gurtej Singh
Nov 14 '18 at 1:16
@DanielJohnson If I understand you correctly, you want to simulate an off animation of an already selected nav item. You would need to detect if the click is somehow on the same item as the selected item and then only run the animation for deselection. Hope that makes sense?
– Gurtej Singh
Nov 14 '18 at 1:16
Gotcha, thanks for steering me in the right direction.
– Daniel Johnson
Nov 14 '18 at 1:18
Gotcha, thanks for steering me in the right direction.
– Daniel Johnson
Nov 14 '18 at 1:18
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%2f53291389%2fnavigation-menu-jquery-problems%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
