We Keep Coding

How to implement dropdown and also clickable using JavaScript or CSS or jQuery?

I want to make a dropdown which is clickable also. Like I have a menu which has dropdown options so If I hover on it, will display dropdown and if I want to click on that, it should display link that has been provided to it.
This is the HTML:
<ul class="navbar-nav ml-auto nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="mainservice.html" id="navbarDropdown" role="button" aria-expanded="false"> Logistics Services </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ftl.html">FTL</a>
<a class="dropdown-item" href="ltl.html">LTL</a>
<a class="dropdown-item" href="intermodal.html">Intermodal</a>
</div>
</li>
</ul>
So, now I want that if I click on Logistics Services then mainservice.html page should display and dropdown should also be there. It should be mobile friendly also.
I tried through CSS, but when I checked it on mobile, then it is not working as expected.
ul.nav li.dropdown:hover div.dropdown-menu{
display:block;
}
How should I do it?

How to prevent navbar jerking?

I'm working on a small personal project and i have a small issue that i'm not sure how to solve. I use Bootstrap4 , ejs templating engine and express.My project has a Navbar where i show Sign in if user is not signed in and Account in the opposite case.
Here is a relevant part of the Navbar:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto ">
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Some link </a>
</li>
<li class="nav-item navbar-item " id="nav-signIn">
<a class="nav-link" href="/signIn">Sign in</a>
</li>
<li class="nav-item dropdown navbar-item" id="nav-account">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
This is the function that controls what to show on the client side:
function displayAccountOrSignIn() {
if (!document.cookie.split(';').filter((item) => item.includes('logedIn=')).length) {
document.querySelector('#nav-account').style.display = 'none'
}
else {
document.querySelector('#nav-signIn').style.display = 'none'
}
}
My problem is that Navbar is 'jerking' because it first loads HTML and then hides what should not be displayed. I can fix it by checking cookies on the server and then conditionally render parts of Navbar, but i don't think it's a good idea to do so. I'd appreciate any suggestions.

There are a number of options here. To know which one to recommend, we'd probably need to play with your actual site and try a few things. All will work and prevent showing something that shouldn't be seen, some may display sooner.
Have all conditional content hidden first (so nothing ever displays that shouldn't) and then enable display of appropriate parts using your conditional Javascript.
Hide the whole toolbar by default in the HTML until you have run your conditional code and then show the whole toolbar only once its state is finalized at the end of your Javascript. If desired, you can make the toolbar be visibility: hidden rather than display: none so that it still takes up the appropriate vertical height and doesn't cause other content to shift down when it is finally displayed.
Run your conditional script inline in an inline <script> tag immediately after the toolbar HTML. This will ensure that the script runs ASAP after the toolbar HTML is available. You can combine this with either #1 or #2 above.
Determine the proper toolbar server-side so that the HTML that arrives at the browser is already properly pre-formed. Since the server already knows whether the user is logged in or not, this should be possible.

change the label of a button with class=“btn dropdown-toggle” using javascript or css

Hi I pasted the code below I am beginner in html css and javascript I wanted to change the label of a button without id right now its label is login I wanted to change it to admin is it possible can I use javascript or css? I will really appreciate any advice thank you
</div>
<div class="nav-no-collapse header-nav"><ul class="nav pull-right">
<li class=""><a class="btn" href=""><i class="fa fa-home"></i></a></li>
<li class="user-link dropdown">
<a data-toggle="dropdown" class="btn dropdown-toggle">
<i class="fa fa-user white"></i> Login //this part I wanted to change it to admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-title"><span>Account Settings</span></li>
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-power-off"></i> Logout</li>
</ul></li></ul></div>
I tried using a javascript like this

I am not sure if I understand your question because you are not using punctuation, so it is really hard to read. But if it should be about simply changing the Login to Admin without touching the html, your jQuery should be like:
<script>
$(document).ready(function() {
$(".dropdown-toggle").text("Admin");
});
</script>

Firstly you need to use jquery..
Then you can use this
$(document).ready(function(){
$('.fa-user').html('Admin');
});

Title of navbar dropdown won't change when item is clicked

I have searched through all of the questions related to this that I can find and I just can't seem to make the text change.
Here is the dropdown in question:
Marketsource
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
<a class="dropdown-item" id="101" onclick="setStoreType(101);" >Office Deopt</a>
<a class="dropdown-item" id="102" onclick="setStoreType(102);" >Office Max</a>
<a class="dropdown-item" id="103" onclick="setStoreType(103);" >Staples</a>
<a class="dropdown-item" id="104" onclick="setStoreType(104);" >Costco</a>
</div>
</li>
I included the part for the navbar because the way I have it setup currently doesn't seem to quite match any of the examples I have seen.
Javascript that I have right now (I've gone through quite a few variations on something similar):
//Dropdown toggle
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
Can someone assist me with my issue? It's not super important but it's something that would give this webapp a little more responsiveness.
Thank you!
EDIT:
I realize it's been a little bit since I asked this, but I still haven't been able to get it to work. I put the two files that are needed into a Github Gist here:
JS: https://gist.github.com/ChristopherBare/bd29ba9bc4ffea9953c3039acc03f81d
HTML: https://gist.github.com/ChristopherBare/b2770b00881b978af3b666ba67c0e4b1
I don't know whats going on with it. If someone can just look over the files and tell me where I went wrong, that would help tremendously.
P.S. There are a couple functions in the JS that don't really do anything yet because they aren't done. So just ignore that for now.

The issue is here:
$(this).closest('.dropdown-item').children('a').text($(this).text());
and th html is like:
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
here .dropdown-item is under .dropdown-menu and you are using closest() selector, which search for the DOM upwards. Instead of closest try find() and also remove .children('a') as .dropdown-item is itself an anchor.

Not sure if this is what you are looking for but you could do it simply without that extra setStoreType function.(though I am not sure what you are trying to do with that function so i skipped it.)
If you wanted to the id as the store type and not the text inside the link I can add that later.
//Dropdown toggle
/*
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
*/
function setStoreType(){
}
//Dropdown toggle
$(".dropdown-item").on("click", function(){
$("#StoreType").text($(this).text());
});
.dropdown-item:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100">Best Buy</a>
<a class="dropdown-item" id="101">Office Deopt</a>
<a class="dropdown-item" id="102">Office Max</a>
<a class="dropdown-item" id="103">Staples</a>
<a class="dropdown-item" id="104">Costco</a>
</div>
</li>

I still haven't found an answer to this issue. I have posted some github gists so that all of the code is there. It is something to do with jQuery not working properly, or possibly the way that I have my dropdown formatted?

when clicking the dropdown menu, it keeps going to a new page instead of just opening the menu

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-user fa-fw"></i>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a><i class="fa fa-user fa-fw"></i> User
Profile</a></li>
<li><a><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i>
Logout</a></li>
</ul> <!-- /.dropdown-user -->
</li>
and my scripts function is:
$('.dropdown-toggle').on('click', function(e){
$(".dropdown").toggleClass("open",true);
e.preventDefault();
});
the preventdefault doesn't work. when clicking the dropdown menu, the menu open, then my page always refreshes, how to stop my page being refresh.
it's weird that when I set breakpoint on the line "$('.dropdown-toggle').on('click', function(e){ " the page already refreshed before going into the function, but it did refresh after the click. I can't find out what triggers the refreshing.
Solved the problem: I have another script which is a onclick event on "" that empty my element. It affects this dropdown event. I add a restrain on the "", and the problem solve. The page suddenly emptied made me think the page is refresh.

Try this:
$('.dropdown-toggle').on('click', function(e){
e.preventDefault();
$(".dropdown-menu").toggleClass("open",true);

Use like this
$(".dropdown-toggle").click(function(){
$(this).parent().find(".dropdown-menu").toggle();
return false;
});

Do you have to bind the event like this ??
$('.dropdown-toggle').on('click', function(e){
If not, An easy way to fix it is to move your code inside a method and add the function name directly to the link with a return...
<a class="dropdown-toggle" onclick="return MyMethod()" data-toggle="dropdown">
<i class="fa fa-user fa-fw"></i>
<i class="fa fa-caret-down"></i>
</a>
And for the method:
function MyMethod(){
$(".dropdown").toggleClass("open",true);
return false;
}