setAttribute работает в Safari, а не в IE

Question

Я прочитал много сообщений на эту тему, но ни один из них не подходит для моей проблемы.При действии onclick над тегом img я хочу, чтобы произошло несколько вещей:

1. изображение должно измениться (+ на - или наоборот);
2. установить для этого значениеimg tag;
3. переписать действие onclick, чтобы указать на другую функцию в будущем.
4. скрыть (или показать) div (включая содержимое курса.

Thisработает безупречно в Safari (при использовании Mac), но приложение, которое я пишу (и буду использовать это меню), будет в основном использоваться в IE. Ну, угадайте, что это не работает в IE.

Я построил 2 функции, некоторые CSS и HTML-код. Вот некоторые фрагменты:

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

Я решил свою собственную проблему с помощью функции 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 2

Arrggghhhh ....

Теперь все работает отлично. Проблема была ... пробел между div en # в объявлении var. Это заставило скрипт не обращаться к 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;  
}

Answer 3

Вам не нужны два обработчика.Только это:

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/