1

fadeToggle は、静的な HTML 要素で問題なく動作します: HTML:

<div id="wrapper" style="
position: relative;
display: inline-block;
width: 116px;
height: 116px;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg') no-repeat;
">
<img id="cover" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Example.png/116px-Example.png" />
</div>

Jクエリ:

$("#wrapper").click(function() {
    $("#cover").fadeToggle("slow");
});

http://jsfiddle.net/BishKopt/zFq5P/1/

しかし、JQueryでラッパーを追加しようとすると...

HTML:

<img id="cover" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Example.png/116px-Example.png" />

Jクエリ:

$wrapper = $('<div></div>');
$wrapper.attr('id', 'mywrapper');
$wrapper.css({
    position: "relative",
    display: "inline-block",
    width: $("#cover").width(),
    height: $("#cover").height(),
    background: "url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg') no-repeat"
});
$("#cover").wrap($wrapper);

$("#mywrapper").click(function() {
    $("#cover").fadeToggle("slow");
});

http://jsfiddle.net/BishKopt/kazKF/1/

... 2 回目のトグル (2 回目のクリック) の後 - img html 要素が「選択」されます...それを回避する方法はありますか? ありがとう！

4

2 に答える 2

1

「選択」がテキスト選択を意味する場合は、次のようにします。

CSS:

#mywrapper{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

ただし、ブラウザが div の周りに不要な境界線を追加している場合は、次のようにします。

CSS:

#mywrapper{
    outline:none;
}
于 2012-11-17T03:09:50.557 に答える
1

私は一種の「ハック」でそれを解決することができました...

$("#cover").after($('<a style="display: hidden; position: absolute;" id="hack"></a>'));

$("#mywrapper").click(function() {
    $("#cover").fadeToggle("slow");
    $("#hack").blur();
});
于 2012-11-22T01:13:38.190 に答える