Question

我已经阅读了很多关于这个主题的帖子，但没有一个符合我的问题。在关于img标签的onclick操作上，我想要发生几件事。

图像必须更改（+到 - ，反之亦然）;
为该img标记设置de alt;
重写onclick动作以指向将来的另一个函数。
隐藏（或取消隐藏）div（包括课程内容。

这在Safari（使用Mac）中完美无缺，但我正在编写的应用程序（并将使用此菜单）将主要用于IE。好吧，猜猜看，它在IE上不起作用。

我已经构建了2个函数，一些css和offcourse 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

您不需要两个处理程序。就是这样：

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

似乎对我来说，我已经明确地说明了必须切换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;  
}

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

3 个答案: