Javascript菜单修改 [英] Javascript menu modifications
问题描述
我一直在使用Travis的扩展菜单
（ http://www.squidfingers.com/code/dhtml/expandingmenu/ ）对于一个网站我来说是工作的b $ b。问题是我需要为它添加一些功能。
我需要能够在页面上定义要打开的子部分
，但当你为它选择另一个选项打开
部分并关闭之前打开的部分时。
我虽然我已绕过这个将一个类添加到嵌套的ol和
设置它显示：inline;在CSS中，但不幸的是，因为CSS强制嵌套部分打开，当你点击
另一个部分时，它会保持打开状态。
任何javascript专家在那里想要帮助我吗？代码发布
以下...
//节点功能
if（！window.Node）{
var Node = {ELEMENT_NODE：1，TEXT_NODE：3};
}
函数checkNode（节点，过滤器）{
return（filter == null || node.nodeType == Node [filter] ||
node.nodeName.toUpperCase（）== filter.toUpperCase（））;
}
函数getChildren（节点，过滤器）{
var result = new Array（）;
var children = node.childNodes;
for（var i = 0; i< children.length; i ++）{
if（checkNode（children [i]，filter））
结果[result.length] =孩子[i];
}
返回结果;
}
function getChildrenByElement（node）{
return getChildren（node，" ELEMENT_NODE"）;
}
函数getFirstChild（node，filter） {
var child;
var children = node.childNodes;
for（var i = 0; i< children.length; i ++ ）{b / b
孩子= children [i];
if（checkNode（child，filter））return child;
}
返回null;
}
函数getFirstChildByText（节点）{
返回getFirstChild（节点，TEXT_NODE）;
}
函数getNextSibling（节点，过滤器）{
for（var sibling = node.nextSibling;兄弟姐妹！= null; sibling =
sibling.nextSibling）{
if（checkNode（sibling，filter））返回兄弟;
}
返回null;
}
函数getNextSiblingByElement（node）{
return getNextSibling（node，" ELEMENT_NODE"）;
}
//菜单功能&属性
var activeMenu = null;
函数showMenu（）{
if（activeMenu）{
activeMenu.className ="" ;;
getNextSiblingByElement（activeMenu）.style.display =
" none";
}
if（this == activeMenu）{
activeMenu = null;
}否则{
this.className =" active";
getNextSiblingByElement（this）.style.display =" block";
activeMenu = this;
}
返回false;
}
函数initMenu（）{
var菜单，菜单，文本，a，i;
menus = getChildrenByElement（document.getElementById（" menu"））;
for（i = 0; i< menus.length; i ++）{
menu = menus [i];
text = getFirstChildByText（menu）;
a = document.createElement（" a" ）;
menu.replaceChild（a，text）;
a.appendChild（text）;
a.href ="＃" ;;
a.onclick = showMenu;
a.onfocus = function（）{this.blur（）};
}
}
// ||||||||||||||||||||||||||||||||如果（document.createElement）window.onload = initMenu;
I''ve been using Travis''s Expanding Menu
(http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i''m
working on. The problem is I need to add some functionality to it.
I need the the ability to define a subsection to be open when you land
on a page, but when you select another option for it to open that
section and close the previously open one.
I though i''d got round this by adding a class to the nested ol and
setting it to display: inline; in the CSS, but unfortunatly, because
the CSS forces the nested section open it remains open when you click
another section.
Any javascript experts out there fancy helping me out? Code posted
below...
// Node Functions
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] ||
node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter))
result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling =
sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu(){
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display =
"none";
}
if(this == activeMenu){
activeMenu = null;
}else{
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu "));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
// ||||||||||||||||||||||||||||||||||||||||||||||||||
if(document.createElement) window.onload = initMenu;
推荐答案
Jay< jv ***** @ hotmail.com>在消息中写道
news：11 ********************** @ l41g2000cwc.googlegr oups.com ...
Jay <jv*****@hotmail.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...
我一直在使用Travis的扩展菜单
（ http://www.squidfingers.com/code/dhtml/expandingmenu/ ）我正在努力工作的网站。问题是我需要为它添加一些功能。
我需要能够在页面上定位要打开的子部分，但是当你选择另一个选项时它打开那个
部分并关闭之前打开的部分。
我虽然通过在嵌套ol中添加一个类并将它设置为显示来解决这个问题： 排队;在CSS中，但不幸的是，因为CSS强制嵌套部分打开，当你点击另一部分时它仍然保持打开状态。
任何javascript专家都喜欢帮助我吗？
I''ve been using Travis''s Expanding Menu
(http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i''m
working on. The problem is I need to add some functionality to it.
I need the the ability to define a subsection to be open when you land
on a page, but when you select another option for it to open that
section and close the previously open one.
I though i''d got round this by adding a class to the nested ol and
setting it to display: inline; in the CSS, but unfortunatly, because
the CSS forces the nested section open it remains open when you click
another section.
Any javascript experts out there fancy helping me out?
这是一个似乎有用的kludge。用这段代码替换initMenu（），并将
设置为'startWith''到你想要显示的部分，其中0 ==
。
函数initMenu（）
{
var菜单，菜单，文本，a，i，startWith = 1; //最初显示的集合
部分
menus = getChildrenByElement（document.getElementById（" menu"））;
for（i = 0; i< menus.length; i ++）
{
menu = menus [i];
text = getFirstChildByText（menu）;
a = document.createElement（" a"）;
menu.replaceChild（a，text）;
a。 appendChild（text）;
a.href ="＃" ;;
a.onclick = showMenu;
a.onfocus = function （）{this.blur（）};
a.id =" mLink" + i
if（i == startWith）
>
getNextSiblingByElement（（activeMenu = document.getEl ementById（a.id）））。style.di
splay =" block";
} < br $> b $ b $
-
SC http://makeashorterlink.com/?H3E82245A
Here''s a kludge that seems to work. Replace initMenu() with this code, and
set ''startWith'' to the section you want to display initially, where 0 ==
first.
function initMenu()
{
var menus, menu, text, a, i, startWith=1; // Sets initially displayed
section
menus = getChildrenByElement(document.getElementById("menu "));
for(i = 0; i < menus.length; i++)
{
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
a.id="mLink"+i
if(i==startWith)
getNextSiblingByElement((activeMenu=document.getEl ementById(a.id))).style.di
splay = "block";
}
}
--
S.C. http://makeashorterlink.com/?H3E82245A
>这是一个似乎有用的kludge。用这个
代码替换initMenu（），并将
> Here''s a kludge that seems to work. Replace initMenu() with this
code, and
设置''startWith''替换为你想要显示的部分，其中0
== first。
函数initMenu（）
{var >>菜单，菜单，文本，a，i，startWith = 1; //最初设置
显示的部分
menus = getChildrenByElement（document.getElementById（" menu"））;
for（i = 0; i< menus.length; i ++）
{
menu = menus [i];
text = getFirstChildByText（menu）;
a = document.createElement（" a"）;
menu.replaceChild（a，text）;
a.appendChild（text）;
a.href ="＃" ;;
a.onclick = showMenu;
a。 onfocus = function（）{this.blur（）};
a.id =" mLink" + i
if if（i == startWith）
getNextSiblingByElement（（activeMenu = document.getEl ementById（a.id）））。style.di splay =" block";
}
}
set ''startWith'' to the section you want to display initially, where 0 == first.
function initMenu()
{
var menus, menu, text, a, i, startWith=1; // Sets initially displayed section
menus = getChildrenByElement(document.getElementById("menu "));
for(i = 0; i < menus.length; i++)
{
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
a.id="mLink"+i
if(i==startWith)
getNextSiblingByElement((activeMenu=document.getEl ementById(a.id))).style.di splay = "block";
}
}
Stephen，
感谢您花时间帮我解决这个问题，不幸的是
我对javascript的了解是垃圾， hense我要求一些帮助。
你提出的''kludge''很有效，所以提前感谢！虽然
我还有其他一些问题，...有一种简单的方法可以添加这些
两个功能......
（1）该脚本目前在外部javascript文档中保存，
所以有没有办法将StartWith触发器放到页面上？
（2）在某些情况下，菜单需要显示为默认值，即没有显示
子菜单。
如果您（或其他人）可以腾出时间看看这个
然后我会非常感激！
詹姆斯
Stephen,
thanks for taking the time to help me out with this one, unfortunatly
my knowledge of javascript is rubbish, hense my asking for some help.
Your ''kludge'' as you put it works great so thanks in advance! Although
I have a couple of other questions,.. is there an easy way to add these
two features...
(1) The script is currently, held in an external javascript document,
so is there any way of putting the ''StartWith'' trigger onto the page?
(2) Also in some cases the menu needs to display as default i.e with no
sub menu displayed.
If you (or anyone else) could spare the time to have a look at this
then I would be most grateful!
James
Jay< jv ***** @ hotmail.com>在消息中写道
news：11 ********************** @ g14g2000cwa.googlegr oups.com ...
Jay <jv*****@hotmail.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.com...
这是一个似乎有用的kludge。用这段代码替换initMenu（），并将
Here''s a kludge that seems to work. Replace initMenu() with this code, and
set''startWith''添加到你想要显示的部分，其中0
set ''startWith'' to the section you want to display initially, where 0
==
==
首先。
函数initMenu（）
{var >>菜单，菜单，文本，a，i，startWith = 1; //最初设置
first.
function initMenu()
{
var menus, menu, text, a, i, startWith=1; // Sets initially
显示
section
menus = getChildrenByElement（document.getElementById（" menu"））;
for（i = 0; i< menus.length; i ++）
{= >> menu = menus [i];
text = getFirstChildByText（menu）;
a = document.createElement（"一个"）;
menu.replaceChild（a，text）;
a.appendChild（text）;
a.href ="＃" ;;
a.onclick = showMenu;
a.onfocus = function（）{this.blur（）};
a.id =" mLink" + i
if（i == startWith）
section
menus = getChildrenByElement(document.getElementById("menu "));
for(i = 0; i < menus.length; i++)
{
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
a.id="mLink"+i
if(i==startWith)
getNextSiblingByElement（（activeMenu = document.getEl ementById（a.id）））。style.di
getNextSiblingByElement((activeMenu=document.getEl ementById(a.id))).style.di
splay =" block";
}
}
splay = "block";
}
}
Stephen，
谢谢花时间帮我解决这个问题，不幸的是我对javascript的了解是垃圾，hense我要求一些帮助。
你提出的''kludge''很有效，所以提前感谢！虽然我还有其他一些问题，但是有一种简单的方法可以添加这两个功能......
（1）脚本目前在一个外部的javascript文档，
那么有没有办法将''StartWith''触发器放到页面上？
Stephen,
thanks for taking the time to help me out with this one, unfortunatly
my knowledge of javascript is rubbish, hense my asking for some help.
Your ''kludge'' as you put it works great so thanks in advance! Although
I have a couple of other questions,.. is there an easy way to add these
two features...
(1) The script is currently, held in an external javascript document,
so is there any way of putting the ''StartWith'' trigger onto the page?
删除startWith的声明initMenu（）函数，然后在包含菜单的页面中的脚本标记内定义
startWith：
< script type =''text / javascript'' >
var startWith = 1;
< / script>
（2）在某些情况下菜单需要显示为默认值，即没有显示
子菜单。
Delete the declaration of startWith in the initMenu() function, then define
startWith within script tags in the page containing the menu:
<script type=''text/javascript''>
var startWith=1;
</script>
(2) Also in some cases the menu needs to display as default i.e with no
sub menu displayed.
然后在这种情况下，将startWith指定为-1。
-
SC http：// makeashorterlink。 com /？H3E82245A
Then under those circumstances, assign startWith a value of -1.
--
S.C. http://makeashorterlink.com/?H3E82245A
这篇关于Javascript菜单修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
