web-dev-qa-db-ja.com

可視性：可視/非表示div

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

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

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

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

jquerycsshtmlvisibility
17
Scott Robertson

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

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

$(".imageShowWrapper").click(function() {
    $(this).hide();
});
25
undefined

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

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

5
Linmic

別のオプション：

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

fadeToggleとslideToggleを使用することもできます

2
brains911
$(".imageIcon, .imageShowWrapper").click(function(){
    $('.imageShowWrapper').toggle();
});
0
Erik J. Olson

フェードメソッドを使用すると、よりスムーズに移行できます。

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

0
Sampson

コードのhtmlおよびjquery部分を見ずに言うのは難しい。しかし、divを表示/非表示する部分がページのリロードの影響を受けているように見えますか？ divを表示/非表示にするコードをa$(document).ready(function() { .....})ブロック内に配置している可能性があります。また、ノートに別の関連ポイントがなど、ボタン、アンカーのようなHTML要素がクリックされるたびに、クリックがデフォルトのタイプであること=提出することが考えられているということでしょう、とページがそれを止めるtoo.Toこのような状況の下でリロードします、一つは使用することができますevent.preventDefault()

0
Binita Bharati