0

だから私は画像を持っているこのコードを持っています、そしてそれをクリックするとドロップダウンメニューが表示されます。ものすごく単純。コードは正常に機能しますが、クリック時に画像スワップを組み込むことを試みており、問題が発生しています。HTMLとJSは次のとおりです（CSSもいくつかありますが、省略します）。

HTML：

<div id="header">
  <dl class="dropdown">
    <dt><a href="#"><img src="images/cogwheel_btn.png"/></a></dt>
    <dd>
    <ul>
        <li><a href="#">Favorites</a></li>
        <li><a href="#">History</a></li>
    </ul>
    </dd>
  </dl>
</div>

JS：

$(document).ready(function() {
$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});     
$(".dropdown dd ul li a").click(function() {
    var text = $(this).html();
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#result").html("Selected value is: " + getSelectedValue("sample"));
});       
function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown"))
    $(".dropdown dd ul").hide();
});
});

（"dt"）。empty（）;のような行を追加してみました。次に（ "dt"）。html（ "new_image"）ですが、ドロップダウン機能が機能しなくなります。誰かアイデアはありますか？

4

2 に答える 2

1

JSFiddleでコードを作成しました。これがあなたがそれをどのように振る舞わせたいかをチェックしてください：

http://jsfiddle.net/3L3At/2/

于 2012-08-30T15:55:32.610 に答える
1

画像の src 属性を更新したいと思うでしょう-

次のように、ドロップダウンで画像を見つけることができます。

$('.dropdown dt img')

次に、src 属性を更新します。

$('.dropdown dt img').attr('src', '/newimage.jpg');

次のようにクリック機能でこれが必要になると思います。

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
    $('.dropdown dt img').attr('src', '/newimage.jpg');
});

オン/オフを切り替えたい場合は、チェックでul要素の可視性を確認できることに注意して.is(':visible')ください。またはさらに良いのは、画像を div に置き換え、 で変更された背景画像を使用することtoggleClass()です。

于 2012-08-30T15:58:59.440 に答える