javascript - after a maxim number - wrap all remaining li items into a ul -
I think it's a lot easier to understand what I'm trying to achieve by simply posting the code. But the idea is that I have around 8l items, but after 3, I would like to create a new thing called "more" and the remaining 5 items should be moved to a new Here's javascript How should that happen To show more part I have worked on it, but the issue It is not known about wrapping the rest of the things. An approach is following (although it still Looks a bit slimy): . Reference: ul which is a Submenu will act as HTML here
& lt; Ul & gt; & Lt; Li & gt; ITEM1 and lt; / Li & gt; & Lt; Li & gt; ITEM2 & lt; / Li & gt; & Lt; Li & gt; ITEM3 & lt; / Li & gt; & Lt; Li & gt; Item4 & lt; / Li & gt; & Lt; Li & gt; Item5 & lt; / Li & gt; & Lt; / Ul & gt;
$ ('.wm_main_menu'). Each (function () {var max = 3 if ($ (this). ('Li'). Length (maximum) {$ (this) .fund ('li: gt (' + max + ')'). (). End () .andend ('
// created by using 'on ()' to represent click-event handling from an 'ul' element / in the DOM // Elements becomes ancestors: $ ('ul') .on ('click', 'li.more', function (e) {$ (this). Find ('ul'). Toggle ();}); // Select all 'Li' elements, only keep 3 (Javascript indexing // zero-based: $ ('li'). Eq (2) // Find later all siblings: .nextAll ) // Wrap them all together in the HTML provided: WrapAll ('
Comments
Post a Comment