setAttribute在Safari中运行，而不在IE中

Question

我已阅读关于此主题的许多帖子，但没有一篇适合我的问题。在img标签上的onclick动作中，我想要发生几件事情。

1. 图像必须改变（+到 - 或反之亦然）;
2. set de alt for img tag;
3. 重写onclick动作以指向将来的另一个函数。
4. 隐藏（或取消隐藏）一个div（包括ofcourse内容。

这在Safari工作完美无瑕（在使用Mac），但我正在写（和将使用这个菜单）的应用将主要被用于。在IE嘛，你猜怎么着，它不能在IE浏览器

我已经建立2个功能，一些CSS和HTML offcourse下面是一些片段：。

的JavaScript：

function changeDaSign(menuNumber) { 

    if (menuNumber=='menu1') { 
     document.getElementById("submenu1_sign").setAttribute("src","images/minus.gif"); 
     document.getElementById("submenu1_sign").setAttribute("alt","-"); 
     document.getElementById("submenu1_sign").setAttribute("onclick","changeDaSignBack('menu1')"); 
     document.getElementById("submenu1").setAttribute("class","submenu"); 
    } 

function changeDaSignBack(menuNumber) { 

if (menuNumber=='menu1') { 
    document.getElementById("submenu1_sign").setAttribute("src","images/plus.gif"); 
    document.getElementById("submenu1_sign").setAttribute("alt","+"); 
    document.getElementById("submenu1_sign").setAttribute("onclick","changeDaSign('menu1')"); 
    document.getElementById("submenu1").setAttribute("class","hidden"); 
} 

的CSS：

.hidden { 
    display: none; 
    color:#444; 
} 

ul.menu { 
    margin-left:5px; 
    color: #C00; 
    list-style-type: none; 
} 

ul.submenu { 
    margin-left: 10px; 
    color: #C90; 
    list-style-type: none; 
} 

a.tobemade { 
    font-style:normal; 
    text-decoration: none; 
    color: #C00; 
} 

div.submenu { 
    border: #00F thin solid" 
} 

的HTML：

<ul class="menu"> 
<li> 
    <img id="submenu1_sign" src="images/plus.gif" alt="+" onclick="changeDaSign('menu1')"; return false; /> 
    <a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;>Menu Item 1</a> 

    <div class="hidden" id="submenu1"> 
    <ul class="submenu" id="submenu1"> 
     <li> 
      <a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;> submenu item 11 </a> 
     </li> 
     <li> 
      <a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;> submenu item 12 </a> 
     </li> 
    </ul> 
    </div> 
</li></ul> 

建议，帮助在IE和Safari浏览器，请这方面的工作，以及对代码整形手术。

Answer 1

你不需要两个处理程序。只是这样的：

HTML：

<ul class="menu"> 
    <li> 
     <img src="images/plus.gif" alt="+"> 
     <a href="#">Menu Item 1</a>  
     <ul class="hidden"> 
      <li> 
       <a href="#">submenu item 11</a> 
      </li> 
      <li> 
       <a href="#">submenu item 12</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

的JavaScript：

img.onclick = function() { 
    var submenu = this.parentNode.getElementsByTagName('ul')[0]; 
    if (this.alt === '+') { 
     this.alt = '-'; 
     this.src = 'images/minus.gif'; 
     submenu.className = 'submenu'; 
    } else { 
     this.alt = '+'; 
     this.src = 'images/plus.gif'; 
     submenu.className = 'hidden'; 
    } 
}; 

现场演示：http://jsfiddle.net/nJZFK/1/

Answer 2

，我决定使用一个jQuery之类的函数，所以我自己的问题：

$(document).ready(function() { 
    $("img").click(function() { 

     var whichSubmenu ="div #"+$(this).get(0).id; 
     var imgPlusOrMinus=new RegExp("plus"); 

     $(whichSubmenu).toggle(); 

     if (imgPlusOrMinus.test($(this).get(0).src) == true) { 
      $(this).attr("src","images/minus.gif"); 
      $(this).attr("alt","-"); 
     } else { 
      $(this).attr("src","images/plus.gif"); 
      $(this).attr("alt","-"); 
     } 
    }); 
}); 

比较优雅。它确实给我带来了另一个难题。任何人都可以启发我，为什么下面的代码可以做和不行？

这不结合上述jQuery函数工作：

<li> 
    <img id="submenu1" src="images/plus.gif" alt="+"/>Menu Item 1 
    <div class="submenu" id="submenu1" > 
     <ul class id="submenu1"> 
      <li>submenu item 11</li> 
     </ul> 
    </div> 
</li> 

In CSS file: 
     ul.submenu { 
     list-style-type: none; 
     } 
     div.submenu { 
     display: none; 
     } 

这确实结合工作与上述jQuery函数：

<li> 
    <img id="submenu1" src="images/plus.gif" alt="+"/>Menu Item 1 
    <div id="submenu1" > 
     <ul class="submenu" id="submenu1"> 
      <li>submenu item 11</li> 
     </ul> 
    </div> 
</li> 

In CSS file:   
    ul.submenu { 
     list-style-type: none; 
     display: none; 
    } 

好像我的，我清楚的说明var whichSubmenu DIV必须切换。

其他信息我不想要默认隐藏的子菜单项并在点击后显示。

Answer 3

Arrggghhhh ....

现在就完美了。问题是...var声明中的div en＃之间的空格。这导致脚本不处理div＃someId，而是div #someId，它是第一个div和每个#someId。 BooHoooo ...

这里工作的脚本：

--------- jQuery: ---------- 
$(document).ready(function() { 
    $("img").click(function() { 
var whichSubmenu ="div#"+$(this).get(0).id; 
var imgPlusOrMinus=new RegExp("plus"); 
     $(whichSubmenu).toggle(); 
    if (imgPlusOrMinus.test($(this).get(0).src) == true) { 
      $(this).attr("src","images/minus.gif"); 
      $(this).attr("alt","-"); 
    } else { 
     $(this).attr("src","images/plus.gif"); 
     $(this).attr("alt","-"); 
    } 
}); 
}); 

--------- HTML: ------------ 
<div> 
<ul class="menu"> 
<li> 
     <img id="submenu1" src="images/plus.gif" alt="+"/><a href="#" class="tobemade" return false;>Menu Item 1</a> 
     <div class="submenu" id="submenu1" > 
       <ul class="submenu"> 
       <li><a href="…> submenu item 11 </a> </li> 
       <li><a href="...> submenu item 12 </a> </li> 
       </ul> 
     </div> 
</li> 
</ul> 
</div> 

------- CSS: --------- 
ul.submenu { 
    list-style-type: none; 
} 

div.submenu { 
    display: none; 
}