I'm trying to have a simple dropdown with product listings which will filter the products on click, so the dropdown is Onclick.
Issue -
I have multiple products in a category, i'm trying to have a dropdown which will collapse other products which are not used on click.
The current script i have collapses everything and opens it up again and not able to attach a class to it to show downarrow when opened.
It is way too buggy is there any other way to achieve this or a tutorial / script or something.
Here is the jsfiddle.
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
i dont have specific solution for your problem,
but still you can take a look at this Select2 jquery plugin, you can have many facilities like searching and displaying image, just check this link Select2 - DropDown
hope this will help you...
please look below link
http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/
You can check demo over there for multilevel dropdown menu.
Changed a little bit of code(html and script) from your jsfiddle see if that is what you are looking for
http://jsfiddle.net/nextg_tech/4N3wA/
script
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
html
<div class="container">
<ul class="productfilters topnav">
<li>All</li>
<li class="hasarrow">
Product 1
<ul class="ddone">
<li class="hasarrow">Sub Product 1
<ul class="ddone">
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
</ul>
</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li>
</ul>
</li>
<li class="hasarrow">Product 2
<ul class="ddone">
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
</ul>
</li>
</ul>
</div>
Related
I am fairly new to java script.
I would like to know how to make a drop down menu in which it will have links as element, but it will change according to what the user inputs.
I am working on a calendar, in which each day there is a different event, and a different link to sign up for that event. My goal is to create a drop down menu that will give the links to sign up for the several events happening on that day. So it will change its content according to which day the user selects. So far, I only see how to create drop down menus with already set links, but I want to have the drop down menu to be able to change the links in the elements, according to what the user chooses.
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
</ul></li>
<li>Menu 4</li>
</ul>
Here's a simple example of how to change links in javascript:
<ul>
<li>Menu 1</li>
</ul>
<script>
document.getElementById("link1").setAttribute("href", "https://www.google.com/");
document.getElementById("link1").innerText = "My New Link"
</script>
So I have a navigation bar with links and sub links. I currently have my links and sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children().slideToggle(300);
});
}
$(document).ready(main);
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
It should work:
function main() {
$('.sub-elements').hide();
$('.main-elements').on('click', function () {
$(this).find('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
Maybe you forget to add the children class in jQuery
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
I'm trying to create a select like this(it is a drop down select input) :
as you can see when the select opens it display main categories which by clicking on each category the sub categories will be shown . also you can click on the tick to choose the current category and sub category.
Also , when sub categories of a category is being displayed , there is two item at the top. one is the tick and the other one is back which by clicking on it , you could see the main categories again.
How can create selects like that?
Thanks in advance
this is the html part that you can use to have a menu and sub-menu.
<body class="no-js">
<nav id="topNav">
<ul>
<li>Nav Link 1</li>
<li>
Nav Link 2
<ul>
<li>Sub Nav Link 1</li>
<li>Sub Nav Link 2</li>
<li>Sub Nav Link 3</li>
<li>Sub Nav Link 4</li>
<li class="last">Sub Nav Link 5</li>
</ul>
</li>
<li>Nav Link 3</li>
<li>Nav Link 4</li>
<li>Nav Link 5</li>
</ul>
</nav>
</body>
Hi I am trying to make a horizontal menu bar using CSS and Javascript.
When clicked, I want the menu item to background to turn black.
Here is a part of HTML code-
<ul id="top_menu">
<li onclick="arrow(this)">item no 1</li>
<li onclick="arrow(this)">item no 2</li>
<li onclick="arrow(this)">item no 3</li>
<li onclick="arrow(this)">item no 4</li>
<li onclick="arrow(this)">item no 5</li>
</ul>
JavaScript part-
function arrow(x){
x.style.background="#000000";
}
Now when someone clicks on the menu, the background turns black.The problem is when any other item is selected(clicked) the previous selected item doesn't goes back to its original background color.
How should I implement this feature?
Thanks!
There are few ways... This one is easiest to me:
function arrow(x){
var ul = document.getElementById('top_menu');
list=ul.getElementsByTagName("li");
for(i=0;i<list.length;i++){
if(list[i]!==x){
list[i].style.background="#ffffff";
}
else {
list[i].style.background="#000000";
}
}
}
Demo: http://jsfiddle.net/ag9L09sb/1/
Could anyone please let me know what i'm doing wrong.
I have:
//My HTML
<div>
<ul>
<li id="test">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
//My CSS
.list-in-list {
display:none;
}
//My jQuery
$(document).ready(function() {
$('#test').click(function() {
alert("hello");
});
});
My final goal is to show that none displayed content if you press a list item, so that it expands neatly. However, i can't seem to get that alert() appearing in any way. Should i use an id for all list items in the main list, or is it enough with a class?
/W
you can add .next function to show next ul for any li curreny click by user. you have to change id test to one class name to make effect in all click of main li
HTML would be like
<div>
<ul>
<li class="main">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main" >Main Item 2</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main">Main Item 3</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</div>
and JQuery function is below
$(document).ready(function() {
$('.main').click(function() {
$(this).next(".list-in-list").slideToggle();
});
});
for detail you can check link
Should i use an id for all list items in the main list, or is it enough with a class?
IDs are unique. Your JavaScript code will not work properly if you have multiple identical IDs. If you're planning on adding a similar attribute to all of your list items you'd use a class in this case (and reference it with . instead of #). In this case you'd call the click function using:
$('li.myClass').click(...);
If you only have one list, however, you can simply add the ID to the ul and use the click function as:
$('ul#myId > li').click(...);
Note that it would be marginally quicker with the classes in this case.
You'd then reference your inner ul using:
$('li.myClass > ul.list-in-list');
Or, depending on which of the above you went with:
$('ul#myId > li > ul.list-in-list');
(You'd use > here to select only the direct child. If you used ul#myId li you'd also be selecting the li elements which belong to any inner ul)
Your code works fine I do believe you have not included Jquery on your page - or maybe the path to it is not valid. Check your network tab to see if you get an http error retrieving jquery.
You can show the hidden li by doing the following:
$(document).ready(function() {
$('#test').click(function(e) {
$(this).find('.list-in-list').show();
});
});
Your code works fine:
Demo
In this case classes would be better than ids because Id's have to be unique on your page. You can use classes like in the demo below by adding a class to your outer li elements. Just change the binding from #test to whatever class you give your li elements.
$('.clickAbleLi').click(function(e) {
$(this).find('.list-in-list').show();
});
Demo
You close your </li> tag before your "list-in-list". You should close your </li> tag after your inside list ;) Like this :
<div>
<ul>
<li id="test">Main Item 1
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
It sholud work but Try moving the ID attribute to the A instead of LI if you experience problems