Question

对javascript / jquery来说还不错，所以我能得到的任何帮助都会非常感激。 onclick事件在Firefox，Chrome和IE9中触发......但不是IE8及更早版本。我做错了什么？

HTML

<ul id="list">
<li><a href="url">Item 1</a><a href="javascript:void(0)" class="info-toggle" onclick="toggleInfo(event)"></a>
<p>Informational text</p>
</li>
<li><a href="url">Item 2</a><a href="javascript:void(0)" class="info-toggle" onclick="toggleInfo(event)"></a>
<p>Informational text</p>
</li>
</ul>

CSS

#list li p {
display: none;
 }

#list li .info-toggle {
  background: url(../../images/info-blue17.png) no-repeat;
  display: inline-block;
  height: 17px;
  margin: 0 0 -3px 10px;
  width: 17px;
}

#list li.expanded p {
  display: block;
}

#list li.expanded .info-toggle {
  background: url(../../images/info-17.png) no-repeat;

的Javascript

function toggleInfo(event) {
    $target = $(event.target);
    $target.parent().toggleClass("expanded");
    }

如果我需要提供任何其他代码/信息，请告知我们。

非常感谢提前。

Answer 1

您可以使用下面的纯jQuery代码

$(document).ready(function() {
    $('#list a').click(function(e) {
        e.preventDefault();
        $(this).parent().toggleClass("expanded");
    });
});

如上面的代码不适合您，请将this代替event传递给您的函数。更新后的代码如下：

HTML

<ul id="list">
    <li>
        <a href="url">Item 1</a>
        <a href="javascript:void(0)" class="info-toggle" onclick="return toggleInfo(this)"></a>
        <p>Informational text</p>
    </li>
    <li>
        <a href="url">Item 2</a>
        <a href="javascript:void(0)" class="info-toggle" onclick="return toggleInfo(this)"></a>
        <p>Informational text</p>
    </li>
</ul>

JS

function toggleInfo(el) {
    $(el).parent().toggleClass("expanded");
    return false;
}

CSS

#list li p {
    display: none;
 }

#list li .info-toggle {
  background: blue url(../../images/info-blue17.png) no-repeat;
  display: inline-block;
  height: 17px;
  margin: 0 0 -3px 10px;
  width: 17px;
}

#list li.expanded p {
  display: block;
}

#list li.expanded .info-toggle {
  background: #666 url(../../images/info-17.png) no-repeat;
}

Answer 2

function toggleInfo(event) {
    $target = $(event.target);
    $target.parent().toggleClass("expanded");
}

我的建议是console.log($(event.target))并验证它是您认为的正确元素的锚标记（或其他）。

在IE8及更早版本中未触发Onclick事件

2 个答案: