I have a series of nested ul that contain my menu data. I wish to use an accordion that displays the child ul when click. My issue is that when the item is click all of the child ul open.
here is the js fiddle. See how all children open.
http://jsfiddle.net/VD5Mk/
here is how i call the accordion
$("#main-nav").accordion({
autoHeight: false,
collapsible: true,
active: false
});
and here is the list
<ul id="main-nav">
<li> item one
<ul>
<li> item one
<ul>
<li> item one </li>
<li> item two </li>
<li> item three </li>
</ul>
</li>
<li> item two </li>
<li> item three </li>
</ul>
</li>
<li> item two </li>
<li> item three </li>
Related
I've just started working with jQuery UI, and while at first it looked like a wonderful tool, I've found that it lacks exactly what I need: a menu button widget.
What I want is the functionality of the jQuery UI Menu Widget, but with some additional bits, primarily a button/clickable area that will show/hide the menu. This alone is simple enough, but what is driving me mad is adding the expected keyboard functionality to this. When a button expands a menu, one expects that clicking outside that menu or pressing ESCAPE will close that menu, and while this works for the widget's submenus, it isn't built into the main widget.
I've been reading about the Widget Factory and extending/modifying widgets, but I'm completely lost as to how to accomplish this specific problem, and I can't seem to find any answers to this that aren't many years old. I've even tried overriding the "collapse" function in the menu instance, but the problem is that I don't quite understand the flow of the code. I basically added an 'else' statement that calls the 'click' event on the button when the conditions for closing a submenu aren't met. This just creates all sorts of weird bugs and I know I don't really have any idea what I'm doing.
A code example of how this is done would be greatly appreciated, but this is a common enough website behavior that I imagine someone has already put this together. I'm just not finding anything up to date.
Thank you in advance!
If you do not find a Widget that is needed, you can combine various elements and use them together.
$(function() {
$(".widget button").button();
$(".widget button").click(function(event) {
event.preventDefault();
if ($("#menu").is(":visible")) {
$("#menu").hide();
} else {
$("#menu").show().menu("focus", null, $("#menu .ui-menu-item:first"));
}
});
$("#menu").menu({
select: function(e, ui) {
console.log(ui.item.text().trim());
}
}).hide();
});
.ui-menu {
width: 150px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="widget">
<h1>Widget Buttons</h1>
<button>A button element</button>
<ul id="menu">
<li class="ui-state-disabled">
<div>Toys (n/a)</div>
</li>
<li>
<div>Books</div>
</li>
<li>
<div>Clothing</div>
</li>
<li>
<div>Electronics</div>
<ul>
<li class="ui-state-disabled">
<div>Home Entertainment</div>
</li>
<li>
<div>Car Hifi</div>
</li>
<li>
<div>Utilities</div>
</li>
</ul>
</li>
<li>
<div>Movies</div>
</li>
<li>
<div>Music</div>
<ul>
<li>
<div>Rock</div>
<ul>
<li>
<div>Alternative</div>
</li>
<li>
<div>Classic</div>
</li>
</ul>
</li>
<li>
<div>Jazz</div>
<ul>
<li>
<div>Freejazz</div>
</li>
<li>
<div>Big Band</div>
</li>
<li>
<div>Modern</div>
</li>
</ul>
</li>
<li>
<div>Pop</div>
</li>
</ul>
</li>
<li class="ui-state-disabled">
<div>Specials (n/a)</div>
</li>
</ul>
</div>
Base Examples:
https://jqueryui.com/menu/
https://jqueryui.com/button/
You can also make use of the Widget Factory to create your own.
jQuery UI's Accordion widget has the active option to keep a certain panel open, but I'm trying to find a way to do this dynamically.
In other words, I want to have a panel open when it corresponds with the page.
HTML:
<ul id="nav-side" class="accordion">
<li class="accordion-title">RPO
<ul>
<li>Value</li>
<li>Solution Competencies</li>
<li>Defined RPO Models</li>
<li>Dedicated Program Management</li>
<li>Solution Planning & Implementation</li>
</ul>
</li>
<li class="accordion-title">CONSULTING
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</li>
<li class="accordion-title">CRM
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</li>
</ul>
So if the user is in the RPO section, the first panel would be open. If in the Consulting section, the second panel would be open.
i have a simple nested UL's and i need to make only main UL sortable not the sub UL
example
<ul class="blocks-list" id="sortme">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-tags">Server</li>
<li class="tag-user">You</li>
</ul>
</li>
<ul class="mini-blocks-list">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
when i used this Jquery Code
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
it made both UL blocks-list and mini-blocks-list sortable
what i need is only to make blocks-list LI's sortable not both UL's
It seems a limitation in jQuery sortable, you could try this plugin or this one if you don't find out a pure jQuery solution.
You can use the sortable items option to filter exactly what you need and to keep other items from being sortable. For example items: "> li". docs
Guys i have an requirement in which i have items in jquery sortable. but i also want the child item of the parent to be moved along with the parent.for example when i drag the item1 in the browser , the sub item1,2,3 should be moved along with them and dropped .
kindly let me know ,if there is any possibility through UI.
<ul>
<li>
<p> item 1</p>
<ul>
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
You could apply a class or id to the first ul and only apply sortable to that unordered list:
HTML:
<ul id="sortable">
<li>
<p> item 1</p>
<ul>
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
JavaScript:
$("#sortable").sortable();
This way, the inner uls are not sortable.
Working example: http://jsfiddle.net/andrewwhitaker/Ds7ds/
Guys i have the following UL elements. The nested UL(nestsort) items are sortable in the IE browser Version 7 , but the drag movement seems wired ,while it works smooth in firefox.Please click on this link http://jsfiddle.net/Ds7ds/1/ from IE , the code is in jsfiddle.
<ul id="sortable">
<li>
<p> item 1</p>
<ul id="nestsort">
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
$("#sortable").sortable();
$("#nestsort").sortable();
This should work for you :
$( "#sortable" ).sortable({
cancel: "#nestsort"
});
$("#nestsort").sortable();
Wish you luck.