Angularjs collapse navbar have to click twice to open
1
I have a collapse navbar that is placed by using ng-include in my index page. For some reason, I have to click twice before the collapse navbar can be opened. I am using navbar from w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown I used exactly what they have but it still requires me to click twice before I can open the collapsed navbar. ( It works normally after that ) No error in console either. Does it have anything to do with angularjs?
navbar HTML:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
.topnav
background-color: transparent;
.topnav a
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
.topnav .icon
display: none;
.dropdown
float: right;
padding-top: 5px;
.hehe
float: right;
padding-top:5px;
.dropdown .dropbtn
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.dropdown-content
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content a
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.topnav a:hover, .dropdown:hover .dropbtn
background-color: transparent;
color: skyblue;
.dropdown-content a:hover
background-color: #ddd;
color: black;
.dropdown:hover .dropdown-content
display: block;
@media screen and (max-width: 900px)
.topnav a:not(:first-child), .dropdown .dropbtn
display: none;
.topnav a:not(:first-child), .hehe
display: none;
.topnav a.icon
float: right;
display: block;
@media screen and (max-width: 900px)
.topnav.responsive position: relative;
.topnav.responsive .icon
position: absolute;
right: 0;
top: 0;
.topnav.responsive a
float: none;
display: block;
text-align: left;
.topnav.responsive .dropdown float: none;
.topnav.responsive .hehe float: none;
.topnav.responsive .dropdown-content position: relative;
.topnav.responsive .dropdown .dropbtn
display: block;
width: 100%;
text-align: left;
.topnav.responsive .hehe
display: block;
width: 100%;
text-align: left;
<div class="topnav" id="myTopnav" ng-controller="searchController">
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate"> x </a>
</div>
</div>
<a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">☰</a>
</div>javascript html css angularjs
edited Nov 14 '18 at 10:57
Viira
2,438527
asked Nov 14 '18 at 9:07
ITnypITnyp
628
add a comment |
1
I have a collapse navbar that is placed by using ng-include in my index page. For some reason, I have to click twice before the collapse navbar can be opened. I am using navbar from w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown I used exactly what they have but it still requires me to click twice before I can open the collapsed navbar. ( It works normally after that ) No error in console either. Does it have anything to do with angularjs?
navbar HTML:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
.topnav
background-color: transparent;
.topnav a
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
.topnav .icon
display: none;
.dropdown
float: right;
padding-top: 5px;
.hehe
float: right;
padding-top:5px;
.dropdown .dropbtn
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.dropdown-content
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content a
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.topnav a:hover, .dropdown:hover .dropbtn
background-color: transparent;
color: skyblue;
.dropdown-content a:hover
background-color: #ddd;
color: black;
.dropdown:hover .dropdown-content
display: block;
@media screen and (max-width: 900px)
.topnav a:not(:first-child), .dropdown .dropbtn
display: none;
.topnav a:not(:first-child), .hehe
display: none;
.topnav a.icon
float: right;
display: block;
@media screen and (max-width: 900px)
.topnav.responsive position: relative;
.topnav.responsive .icon
position: absolute;
right: 0;
top: 0;
.topnav.responsive a
float: none;
display: block;
text-align: left;
.topnav.responsive .dropdown float: none;
.topnav.responsive .hehe float: none;
.topnav.responsive .dropdown-content position: relative;
.topnav.responsive .dropdown .dropbtn
display: block;
width: 100%;
text-align: left;
.topnav.responsive .hehe
display: block;
width: 100%;
text-align: left;
<div class="topnav" id="myTopnav" ng-controller="searchController">
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate"> x </a>
</div>
</div>
<a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">☰</a>
</div>javascript html css angularjs
edited Nov 14 '18 at 10:57
Viira
2,438527
asked Nov 14 '18 at 9:07
ITnypITnyp
628
add a comment |
1
1
1
I have a collapse navbar that is placed by using ng-include in my index page. For some reason, I have to click twice before the collapse navbar can be opened. I am using navbar from w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown I used exactly what they have but it still requires me to click twice before I can open the collapsed navbar. ( It works normally after that ) No error in console either. Does it have anything to do with angularjs?
navbar HTML:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
.topnav
background-color: transparent;
.topnav a
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
.topnav .icon
display: none;
.dropdown
float: right;
padding-top: 5px;
.hehe
float: right;
padding-top:5px;
.dropdown .dropbtn
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.dropdown-content
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content a
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.topnav a:hover, .dropdown:hover .dropbtn
background-color: transparent;
color: skyblue;
.dropdown-content a:hover
background-color: #ddd;
color: black;
.dropdown:hover .dropdown-content
display: block;
@media screen and (max-width: 900px)
.topnav a:not(:first-child), .dropdown .dropbtn
display: none;
.topnav a:not(:first-child), .hehe
display: none;
.topnav a.icon
float: right;
display: block;
@media screen and (max-width: 900px)
.topnav.responsive position: relative;
.topnav.responsive .icon
position: absolute;
right: 0;
top: 0;
.topnav.responsive a
float: none;
display: block;
text-align: left;
.topnav.responsive .dropdown float: none;
.topnav.responsive .hehe float: none;
.topnav.responsive .dropdown-content position: relative;
.topnav.responsive .dropdown .dropbtn
display: block;
width: 100%;
text-align: left;
.topnav.responsive .hehe
display: block;
width: 100%;
text-align: left;
<div class="topnav" id="myTopnav" ng-controller="searchController">
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate"> x </a>
</div>
</div>
<a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">☰</a>
</div>javascript html css angularjs
edited Nov 14 '18 at 10:57
Viira
2,438527
asked Nov 14 '18 at 9:07
ITnypITnyp
628
I have a collapse navbar that is placed by using ng-include in my index page. For some reason, I have to click twice before the collapse navbar can be opened. I am using navbar from w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown I used exactly what they have but it still requires me to click twice before I can open the collapsed navbar. ( It works normally after that ) No error in console either. Does it have anything to do with angularjs?
navbar HTML:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
.topnav
background-color: transparent;
.topnav a
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
.topnav .icon
display: none;
.dropdown
float: right;
padding-top: 5px;
.hehe
float: right;
padding-top:5px;
.dropdown .dropbtn
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.dropdown-content
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content a
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.topnav a:hover, .dropdown:hover .dropbtn
background-color: transparent;
color: skyblue;
.dropdown-content a:hover
background-color: #ddd;
color: black;
.dropdown:hover .dropdown-content
display: block;
@media screen and (max-width: 900px)
.topnav a:not(:first-child), .dropdown .dropbtn
display: none;
.topnav a:not(:first-child), .hehe
display: none;
.topnav a.icon
float: right;
display: block;
@media screen and (max-width: 900px)
.topnav.responsive position: relative;
.topnav.responsive .icon
position: absolute;
right: 0;
top: 0;
.topnav.responsive a
float: none;
display: block;
text-align: left;
.topnav.responsive .dropdown float: none;
.topnav.responsive .hehe float: none;
.topnav.responsive .dropdown-content position: relative;
.topnav.responsive .dropdown .dropbtn
display: block;
width: 100%;
text-align: left;
.topnav.responsive .hehe
display: block;
width: 100%;
text-align: left;
<div class="topnav" id="myTopnav" ng-controller="searchController">
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate"> x </a>
</div>
</div>
<a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">☰</a>
</div> $scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
.topnav
background-color: transparent;
.topnav a
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
.topnav .icon
display: none;
.dropdown
float: right;
padding-top: 5px;
.hehe
float: right;
padding-top:5px;
.dropdown .dropbtn
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.dropdown-content
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content a
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.topnav a:hover, .dropdown:hover .dropbtn
background-color: transparent;
color: skyblue;
.dropdown-content a:hover
background-color: #ddd;
color: black;
.dropdown:hover .dropdown-content
display: block;
@media screen and (max-width: 900px)
.topnav a:not(:first-child), .dropdown .dropbtn
display: none;
.topnav a:not(:first-child), .hehe
display: none;
.topnav a.icon
float: right;
display: block;
@media screen and (max-width: 900px)
.topnav.responsive position: relative;
.topnav.responsive .icon
position: absolute;
right: 0;
top: 0;
.topnav.responsive a
float: none;
display: block;
text-align: left;
.topnav.responsive .dropdown float: none;
.topnav.responsive .hehe float: none;
.topnav.responsive .dropdown-content position: relative;
.topnav.responsive .dropdown .dropbtn
display: block;
width: 100%;
text-align: left;
.topnav.responsive .hehe
display: block;
width: 100%;
text-align: left;
<div class="topnav" id="myTopnav" ng-controller="searchController">
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate"> x </a>
</div>
</div>
<a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">☰</a>
</div> $scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
.topnav
background-color: transparent;
.topnav a
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
.topnav .icon
display: none;
.dropdown
float: right;
padding-top: 5px;
.hehe
float: right;
padding-top:5px;
.dropdown .dropbtn
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.dropdown-content
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content a
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.topnav a:hover, .dropdown:hover .dropbtn
background-color: transparent;
color: skyblue;
.dropdown-content a:hover
background-color: #ddd;
color: black;
.dropdown:hover .dropdown-content
display: block;
@media screen and (max-width: 900px)
.topnav a:not(:first-child), .dropdown .dropbtn
display: none;
.topnav a:not(:first-child), .hehe
display: none;
.topnav a.icon
float: right;
display: block;
@media screen and (max-width: 900px)
.topnav.responsive position: relative;
.topnav.responsive .icon
position: absolute;
right: 0;
top: 0;
.topnav.responsive a
float: none;
display: block;
text-align: left;
.topnav.responsive .dropdown float: none;
.topnav.responsive .hehe float: none;
.topnav.responsive .dropdown-content position: relative;
.topnav.responsive .dropdown .dropbtn
display: block;
width: 100%;
text-align: left;
.topnav.responsive .hehe
display: block;
width: 100%;
text-align: left;
<div class="topnav" id="myTopnav" ng-controller="searchController">
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate"> x </a>
</div>
</div>
<a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">☰</a>
</div>javascript html css angularjs
javascript html css angularjs
edited Nov 14 '18 at 10:57
Viira
2,438527
asked Nov 14 '18 at 9:07
ITnypITnyp
628
edited Nov 14 '18 at 10:57
Viira
2,438527
asked Nov 14 '18 at 9:07
ITnypITnyp
628
edited Nov 14 '18 at 10:57
Viira
2,438527
edited Nov 14 '18 at 10:57
Viira
2,438527
edited Nov 14 '18 at 10:57
Viira
2,438527
2,438527
asked Nov 14 '18 at 9:07
ITnypITnyp
628
asked Nov 14 '18 at 9:07
ITnypITnyp
628
asked Nov 14 '18 at 9:07
ITnypITnyp
628
628
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" ng-click="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
JS:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
In my code everything works fine, navbar is opening after first click
Plunker: http://plnkr.co/edit/zYys9aGUyuvrlSdVknJx?p=preview
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
Hmm, thats weird. No idea why mine requires 2 click. Any way to debug ?
– ITnyp
Nov 14 '18 at 9:25
check your angular version
– BartoszTermena
Nov 14 '18 at 9:26
I am realising something in the element log, when I try yours, it is <div class="topnav"> while mine is <div class="topnav ng-scope"> and it changes to "topnav" after I click it and than to "topnav responsive" on second click, maybe thats the reason why?
– ITnyp
Nov 14 '18 at 9:30
1
Found the solution, thanks for helping tho!
– ITnyp
Nov 14 '18 at 9:41
add a comment |
1
Ok, so the problem was ng-scope is being generated by angularjs into HTML, and I found this solution
myApp.config(['$compileProvider', function ($compileProvider)
$compileProvider.debugInfoEnabled(false);
]);
from AngularJS: Disable or remove ng-scope and ng-binding from generated HTML to remove the ng-scope. And it works now.
answered Nov 14 '18 at 9:41
ITnypITnyp
628
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%2f53296465%2fangularjs-collapse-navbar-have-to-click-twice-to-open%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
1
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" ng-click="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
JS:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
In my code everything works fine, navbar is opening after first click
Plunker: http://plnkr.co/edit/zYys9aGUyuvrlSdVknJx?p=preview
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
Hmm, thats weird. No idea why mine requires 2 click. Any way to debug ?
– ITnyp
Nov 14 '18 at 9:25
check your angular version
– BartoszTermena
Nov 14 '18 at 9:26
I am realising something in the element log, when I try yours, it is <div class="topnav"> while mine is <div class="topnav ng-scope"> and it changes to "topnav" after I click it and than to "topnav responsive" on second click, maybe thats the reason why?
– ITnyp
Nov 14 '18 at 9:30
1
Found the solution, thanks for helping tho!
– ITnyp
Nov 14 '18 at 9:41
add a comment |
1
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" ng-click="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
JS:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
In my code everything works fine, navbar is opening after first click
Plunker: http://plnkr.co/edit/zYys9aGUyuvrlSdVknJx?p=preview
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
Hmm, thats weird. No idea why mine requires 2 click. Any way to debug ?
– ITnyp
Nov 14 '18 at 9:25
check your angular version
– BartoszTermena
Nov 14 '18 at 9:26
I am realising something in the element log, when I try yours, it is <div class="topnav"> while mine is <div class="topnav ng-scope"> and it changes to "topnav" after I click it and than to "topnav responsive" on second click, maybe thats the reason why?
– ITnyp
Nov 14 '18 at 9:30
1
Found the solution, thanks for helping tho!
– ITnyp
Nov 14 '18 at 9:41
add a comment |
1
1
1
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" ng-click="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
JS:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
In my code everything works fine, navbar is opening after first click
Plunker: http://plnkr.co/edit/zYys9aGUyuvrlSdVknJx?p=preview
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" ng-click="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
JS:
$scope.myFunction = function()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
In my code everything works fine, navbar is opening after first click
Plunker: http://plnkr.co/edit/zYys9aGUyuvrlSdVknJx?p=preview
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
answered Nov 14 '18 at 9:21
BartoszTermenaBartoszTermena
7381311
7381311
Hmm, thats weird. No idea why mine requires 2 click. Any way to debug ?
– ITnyp
Nov 14 '18 at 9:25
check your angular version
– BartoszTermena
Nov 14 '18 at 9:26
I am realising something in the element log, when I try yours, it is <div class="topnav"> while mine is <div class="topnav ng-scope"> and it changes to "topnav" after I click it and than to "topnav responsive" on second click, maybe thats the reason why?
– ITnyp
Nov 14 '18 at 9:30
1
Found the solution, thanks for helping tho!
– ITnyp
Nov 14 '18 at 9:41
add a comment |
Hmm, thats weird. No idea why mine requires 2 click. Any way to debug ?
– ITnyp
Nov 14 '18 at 9:25
check your angular version
– BartoszTermena
Nov 14 '18 at 9:26
I am realising something in the element log, when I try yours, it is <div class="topnav"> while mine is <div class="topnav ng-scope"> and it changes to "topnav" after I click it and than to "topnav responsive" on second click, maybe thats the reason why?
– ITnyp
Nov 14 '18 at 9:30
1
Found the solution, thanks for helping tho!
– ITnyp
Nov 14 '18 at 9:41
Hmm, thats weird. No idea why mine requires 2 click. Any way to debug ?
– ITnyp
Nov 14 '18 at 9:25
Hmm, thats weird. No idea why mine requires 2 click. Any way to debug ?
– ITnyp
Nov 14 '18 at 9:25
check your angular version
– BartoszTermena
Nov 14 '18 at 9:26
check your angular version
– BartoszTermena
Nov 14 '18 at 9:26
I am realising something in the element log, when I try yours, it is <div class="topnav"> while mine is <div class="topnav ng-scope"> and it changes to "topnav" after I click it and than to "topnav responsive" on second click, maybe thats the reason why?
– ITnyp
Nov 14 '18 at 9:30
I am realising something in the element log, when I try yours, it is <div class="topnav"> while mine is <div class="topnav ng-scope"> and it changes to "topnav" after I click it and than to "topnav responsive" on second click, maybe thats the reason why?
– ITnyp
Nov 14 '18 at 9:30
1
1
Found the solution, thanks for helping tho!
– ITnyp
Nov 14 '18 at 9:41
Found the solution, thanks for helping tho!
– ITnyp
Nov 14 '18 at 9:41
add a comment |
1
Ok, so the problem was ng-scope is being generated by angularjs into HTML, and I found this solution
myApp.config(['$compileProvider', function ($compileProvider)
$compileProvider.debugInfoEnabled(false);
]);
from AngularJS: Disable or remove ng-scope and ng-binding from generated HTML to remove the ng-scope. And it works now.
answered Nov 14 '18 at 9:41
ITnypITnyp
628
add a comment |
1
Ok, so the problem was ng-scope is being generated by angularjs into HTML, and I found this solution
myApp.config(['$compileProvider', function ($compileProvider)
$compileProvider.debugInfoEnabled(false);
]);
from AngularJS: Disable or remove ng-scope and ng-binding from generated HTML to remove the ng-scope. And it works now.
answered Nov 14 '18 at 9:41
ITnypITnyp
628
add a comment |
1
1
1
Ok, so the problem was ng-scope is being generated by angularjs into HTML, and I found this solution
myApp.config(['$compileProvider', function ($compileProvider)
$compileProvider.debugInfoEnabled(false);
]);
from AngularJS: Disable or remove ng-scope and ng-binding from generated HTML to remove the ng-scope. And it works now.
answered Nov 14 '18 at 9:41
ITnypITnyp
628
Ok, so the problem was ng-scope is being generated by angularjs into HTML, and I found this solution
myApp.config(['$compileProvider', function ($compileProvider)
$compileProvider.debugInfoEnabled(false);
]);
from AngularJS: Disable or remove ng-scope and ng-binding from generated HTML to remove the ng-scope. And it works now.
answered Nov 14 '18 at 9:41
ITnypITnyp
628
answered Nov 14 '18 at 9:41
ITnypITnyp
628
answered Nov 14 '18 at 9:41
ITnypITnyp
628
answered Nov 14 '18 at 9:41
ITnypITnyp
628
628
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%2f53296465%2fangularjs-collapse-navbar-have-to-click-twice-to-open%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
