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; 
}