18

ボタンをクリックしたときにdivを表示し、閉じるボタンで非表示にする最良の方法は何ですか？

私のJqueryコードは次のとおりです。

$(".imageIcon").click(function(){
$('.imageShowWrapper').css("visibility", 'visible');
});
 $(".imageShowWrapper").click(function(){
$('.imageShowWrapper').css("visibility", 'hidden');
});

私が抱えている問題を除いて、クリックすることなく自動的に閉じます。すべてが正常に読み込まれ、約1/2秒間表示されてから、閉じます。何か案は？

4

6 に答える 6

25

showおよびhideメソッドを使用できます。

$(".imageIcon").click(function() {
    $('.imageShowWrapper').show();
});

$(".imageShowWrapper").click(function() {
    $(this).hide();
});
于 2012-05-01T02:53:45.990 に答える
5

あなたの要件によると、私はあなたが必要とするものはこれと同じくらい簡単だと信じています：http: //jsfiddle.net/linmic/6Yadu/

ただし、可視性の使用は、表示/非表示機能の使用とは異なります。詳細：可視性：非表示と表示：なしの違いは何ですか？

于 2012-05-01T03:30:03.033 に答える
2

別のオプション：

$(".imageIcon, .imageShowWrapper").click(function() {  
    $(".imageShowWrapper").toggle($(this).hasClass('imageIcon'));     
});

fadeToggleまた、使用することができますslideToggle

于 2012-05-01T03:15:26.113 に答える
0

フェードメソッドを使用すると、よりスムーズな遷移が得られます。

var imageIcon = $(".imageIcon"),
    imageShowWrapper = $(".imageShowWrapper");

imageIcon.on("click", function(){
  imageShowWrapper.stop().fadeIn();
});

imageShowWrapper.on("click", function(){
   $(this).stop().fadeOut();
});

デモ： http： //jsbin.com/uhapom/edit#javascript,html,live

于 2012-05-01T02:54:20.627 に答える
0 
$(".imageIcon, .imageShowWrapper").click(function(){
    $('.imageShowWrapper').toggle();
});
于 2012-05-01T03:14:49.817 に答える
0

コードのhtmlとjqueryの部分を見ずに言うのは難しいです。しかし、divを表示/非表示にする部分がページのリロードの影響を受けているように見えますか？divを表示/非表示にするコードを$(document).ready(function() { .....})ブロック内に配置している可能性があります。また、ボタン、アンカーなどのhtml要素がクリックされるたびに、クリックはデフォルトのタイプ=送信と見なされ、この状況でもページがリロードされることに注意してください。これを停止するには、event.preventDefault()

于 2019-01-16T01:31:48.593 に答える