You don't need to put open/closed classes on your <ul> tags, only the
<li> ones which contain lists. With the CSS that we've defined, there's
not a problem with doing so, but since the class is undefined it may not
really help very much. Other than that, looks good to me.
- Dash -
[EMAIL PROTECTED] wrote:
> thank you very much, David. here is the simple test html that works
>
> <html>
> <head>
> <script type="text/javascript" src="prototype.js"></script>
> <style>
> li.open ul { display: block; }
> li.closed ul { display: none; }
> </style>
> </head>
> <body>
>
> <div id="tree_menu">
>
> <ul>
> <li class='open'>
> <li class='closed'>1
> <ul class='closed'>
> <li>1.1</li>
> <li>1.2</li>
> </ul>
> </li>
> </li>
> </ul>
>
> </div>
>
> <script type="text/javascript">
>
> $("tree_menu").observe("click", function(event) {
> var element = Event.element(event);
> if (element.tagName == "LI") {
> if( element.hasClassName("open") ) {
> element.removeClassName("open");
> element.addClassName("closed");
> } else {
> element.removeClassName("closed");
> element.addClassName("open");
> }
> }
>
> });
>
> </script>
>
> </body>
> </html>
>
>
>
> On Jun 1, 11:38 am, David Dashifen Kees <[EMAIL PROTECTED]> wrote:
>
>> Yes, the JS can do that. Assuming your tree menu is within an element,
>> probably a div, with an ID of "treemenu", you can do this:
>>
>> $("treemenu").observe("click", function(event) {
>> var element = Event.element(event);
>> /* ... other stuff ... */
>>
>> }
>>
>> The Event.element() function will return the DOM object which caused the
>> Event to happen. Thus, if you click a specific list item within the
>> tree menu div, then it will (a) call the function above and (b) know
>> exactly which list item was clicked using the Event.element() function.
>>
>> - Dash -
>>
>> [EMAIL PROTECTED] wrote:
>>
>>> er. i am wrong. I need the ID to identify which list item i am working
>>> on.
>>> i thought that when i click on certain list that js will figure out
>>> which one i am clicking..
>>>
>>> James.
>>>
>>> On Jun 1, 11:26 am, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:
>>>
>>>> On Jun 1, 11:09 am, "Richard Quadling" <[EMAIL PROTECTED]>
>>>> wrote:
>>>>
>>>>> Each node should have a unique ID. The classname is just to alter the
>>>>> styling from open to close.
>>>>>
>>>> I don't see why i need ID for it. All i need is to show or hide a
>>>> branch with onclick. a classname should do it, no?
>>>>
>>>> James.
>>>>
>>>>> On 01/06/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> I want to make a tree menu that is only need to be viewed (no drag/
>>>>>> drop, editing ).
>>>>>>
>>>>>> searched the groups and i found this post. http://xrl.us/wsgg
>>>>>>
>>>>>> quote the 6th post from David Dashifen Kees
>>>>>> ====
>>>>>> I'd suggest using a structure rather than hierarchical divs; I've made
>>>>>> tree menus mostly out of unordered lists. The children of any node in
>>>>>> a
>>>>>> list are then contained within an internal <ul> within the <li> of the
>>>>>> node. Then, when a list item is clicked, you can open or close it's
>>>>>> internal <ul> with toggling or, as I usually do it, changing the class
>>>>>> name of the list item that you click. That way the class name can not
>>>>>> only control the display of any internal <ul> but it can also alter
>>>>>> the
>>>>>> image that appears to the left of the <li> which indicates whether the
>>>>>> list is expanded or collapsed.
>>>>>> ====
>>>>>>
>>>>>> that seems to be a simple solution but i don't understand the
>>>>>> "changing the class
>>>>>> name of the list item that you click".. I thought i would give a
>>>>>> unique classname for each <ul> when i generate the whole tree. then i
>>>>>> can expand this <ul> when user click on it. why changing the
>>>>>> classname ? I reread his explanation few time but still can't figure
>>>>>> out the reason..
>>>>>>
>>>>>> thanks,
>>>>>>
>>>>>> James.
>>>>>>
>>>>> --
>>>>> -----
>>>>> Richard Quadling
>>>>> Zend Certified Engineer :http://zend.com/zce.php?c=ZEND002498&r=213474731
>>>>> "Standing on the shoulders of some very clever giants!"
>>>>>
>
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
