I'm having a little issue with this accordion script.
And I know why it's happening but I can't fix it. And I'm not sure it's possible to fixed it?
The accordion script i'm using is this and it's very easy to implement. http://www.i-marco.nl/weblog/jquery-accordion-menu/
The mark-up for this accordion is simple and semantic.
<ul class="menu">
<li>
Link
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<li>
Weblog Tools
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<!-- and so fourth -->
</ul>
This is the style of the markup that the script if designed to work with. And it works, see here... http://jsfiddle.net/motocomdigital/CzZqZ/1/
But my problem is because I'm working with a template that I can't change the mark-up of, see my outputted markup below.
<ul class="menu">
<ul>
<li>
Link
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
</ul>
<ul>
<li>
Weblog Tools
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
</ul>
</ul>
This the mark up that is outputted which is stupid.
Its outputting more than it needs to.
I've created a js fiddle for the markup above so you can see what is happening http://jsfiddle.net/motocomdigital/CzZqZ/2/
It's not closing the others when a new one is opening...
Does anyone know how to fix the script so it work like the first jsfiddle, but with the crazy markup above?
Thanks very very much if anyone can help.
Josh
Inside the click handler, change to: var parent = this.parentNode.parentNode.parentNode;. With this it works as the other example you posted.
Add the class 'noaccordian" to your "ul" elements that you want to expand/collaspse on.
Example:
<ul class="menu">
<ul class="noaccordion">
<li>
Click Here
<ul class="acitem">
Related
I've been searching a lot for this, without any solution so far. As you might also have seen the topic title might be a little hard to interpret and that's because I'm not quite sure how to explain it shortly.
The problem
Looking at the HTML below, I know the class of the last element called "active" and this element is chosen dynamically in jQuery, based on which site the visitor is on currently - i.e. different elements has this class depending on the site. On another site the li with class first-sub-li could have the class active (or for that matter the li with class first). This class is, as said, added dynamically based on the site with jquery. From here on I wish to identify the parent of the element with active which is a direct descendent of top-parent and add a class called active-parent to this. I.e. in the case below i wish to add the active-parent class to the li with class second.
EDIT: Please note that the "depth" of the list can vary, therefore also requiring a "dynamic" approach to picking out the parent. I completely forgot this in the initial writing.
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li> <!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
So far I've tried the following jQuery without succes as it doesn't identify it.
EDIT 2: This actually does work, but initially it didn't as it apparently was called before the class was loaded, despite appearing later in the javascript document. Wrapping it in a $(window).on("load", function() solves the problem as shown below.
$(window).on("load", function() {
$(".active").closest("#top-parent > li").addClass("active-parent");
});
The original code was just $(".active").closest("#top-parent > li").addClass("active-parent");
You can start traversing up with .parent(), it will excluding the self li.
$(".active").parent().closest("li").addClass("active-parent");
You can use :has() selector
$('#top-parent > li:has(.active)').addClass("active-parent");
$('#top-parent > li:has(.active)').addClass("active-parent");
.active-parent {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li>
<!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
I think this is what you're looking for. Find all li which are direct descendants of topmost-parent and filter that for the one which has a child .active. Apply the class.
$('#top-parent > li').filter(function(e){
return $(this).find('.active').length>0;
}).addClass("active-parent");
.active-parent{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li">1.1</li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li active">2.1</li> <!-- Here -->
</ul>
</li>
</ul>
I am trying to create a multi level drodown menu with the following code:
<nav role="navigation" class="navigation">
<ul>
<li>Home
</li>
<li>About
<ul>
<li>Company
<ul>
<li>Brands</li>
<li>Stuff</li>
<li>More Stuff</li>
</ul>
</li>
<li>Team
</li>
<li>Goals
</li>
<li>Photos
</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Chairs
</li>
<li>Beds
</li>
<li>Fireplace
</li>
<li>Onother
</li>
</ul>
</li>
<li>Portfolio
</li>
</ul>
</nav>
With some jQuery I have hidden all the second/third level items and added a class that will show a "+" in the right side via CSS.
Demo: http://jsfiddle.net/ZJug9/1/
This works fine for most users, but when I try to use this with VoiceOver on Mac I just can't simply find a way to navigate. Maybe because I don't know all the things about VoiceOver or I am doing something wrong with HTML and JS
Is there something missing from my code that could improve accessibility for blind people using screen readers. What should I do more and why for this particular example.
Any up to date tools or documentation that will put me up to speed about accessibility. I think that the W3C accessibility website is too cluttered and confusing. I read some things about Aria too, but the documentation is really complicated and some people say that using proper markup is good enough.
Please try to answer for this example
UPDATE
I added visibility hidden to the hidden ul's as the screen reader does not speak invisible elements and I will still be able to use CSS3 for the height transition
Demo 2: http://jsfiddle.net/ZJug9/3/
I want to Highlight the Menu Dynamically in Html Pages using Js.
For Example
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES
<ul>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</div>
I given Like this. But its not working
<script>
$(document).ready(function() {
$("#cssmenu ul li").click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
});
For this i would like activate the Menu when it is Clicked Using Js. Please Help me.
Thanks in Advance.
I have a demo for you here: http://jsfiddle.net/ttaN2/4/
I have altered the HTML so that there are correct open and close tags:
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES</li>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</div>
I believe this is what you intended. I am not sure what you intended to happen when you click on another sub menu though. I'll try to help you out if you can describe exactly what you intend to happen.
I created menu using fg.menu.js once its loaded I want to remove the unwanted menu for which user dont have access.
for eg:-
<ul>
<li> menu1
<ul>
<li id="8000610">Test1
</li>
<li id="20247">Test2
</li>
<li id="8000526">Test3
</li>
</ul>
</li>
</ul>
Now after loading the menu I want to remove the Test2
Thanks in advance
If you use jQuery, it's as simple as $('#20247').remove();
With vanilla JS it's
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Also, use search.
I am using a JavaScript drop down navigation menu that I found after some Googling and I've managed to style it the way I want. However, after validating my site, I get errors with the ul tags (Error: Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)). Not only do I get this error, the navigation doesn't work the way it should. I've tried different variations of the ul and li tags, and moved things around, and I still cannot get it to work correctly.
<div class="nav">
<ul id="menu" class="menu">
<li>One
<ul>
<li class="submenu">
One
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="submenu">
<li>Two</li>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</ul>
</li>
<li>Two
<ul>
<li class="submenu">One</li>
<li class="submenu"><li>Deny</li>
<ul>
<li class="noborder">One</li>
<li>Two</li>
<li>Three</li>
</ul>
</ul>
</li>
<li>Three
<ul>
<li class="submenu">
One
</li>
</ul>
</li>
<li>Four
<ul>
<li class="submenu">
One
</li>
</ul>
</li>
</ul>
I am not sure is this is the problem with your java script code. But the mismatch in writing of these html tags also may cause these kind of problems. Please check the opening and closing tags once again and make sure those are in the correct position or not. When i gone through your html code i found some mismatch in the tags. One is-
your FIRST menu item Two are written in between two li /li tags. But your FIRST One menu item are NOT in between these li /li tags.
Close your parent div tag and see if that helps
also this...
<li class="submenu">
<li>Two</li>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</ul>
</li>
...probably needs re-work because you are nesting an li tag before creating a child ul tag. You just to need to learn how to properly nest ul and li tags. Here is a discussion I found on stackoverflow that talks about a similar issue.
Once you get your HTML correct, the javascript process should be easier to manage.
Hope that helps.