0

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

追加のコード/情報を提供する必要がある場合は、お知らせください。

よろしくお願いします。

4

2 に答える 2

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;
}
于 2013-06-26T17:06:18.467 に答える
0 
function toggleInfo(event) {
    $target = $(event.target);
    $target.parent().toggleClass("expanded");
}

私のアドバイスはconsole.log($(event.target))、それがアンカータグ（または何でも）正しい要素であることを確認することです。

于 2013-06-26T16:57:28.897 に答える