2016-04-11 24 views
2

をウォーキングない非表示には、私は私のコードはトグル私は単純なコードを持っている

$('div, button').click(function(){ 
 
    $('.div').toggle('hide'); 
 
})
div{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.container{ 
 
    background: pink 
 
} 
 
.div{ 
 
    background: blue 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>Click</button> 
 
</div> 
 
<div class="div"></div>

その作業であるdivを非表示にします私がcontainer divをクリックしたときにうまくいきましたが、ボタンをクリックしても機能しません。ポルブレは、クリックを2回発射することです。 しかし

+0

を試してみてください( 'DIV')。)(非表示にするには? –

答えて

5

あなたはDOMをバブリングからクリックイベントを防止し、.stopPropagation()と親のクリックイベントをトリガすることにより、それを止めることができることを修正する方法:下記

$('div, button').click(function(e){ 
 
    e.stopPropagation(); 
 
    $('.div').toggle('hide'); 
 
})
div{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.container{ 
 
    background: pink 
 
} 
 
.div{ 
 
    background: blue 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>Click</button> 
 
</div> 
 
<div class="div"></div>

0

使用を問題のJquery。

$('.container, button').click(function(){ 
     $('.div').toggle(500); 
     return false; 
    }) 
+2

これは誤った答えです。問題は要素を隠す方法ではありません。 – Gintoki

+0

@Johnは質問を読んだか???ここでは「私がdivを非表示にしたい場合はdiv.containerをクリックするか、このdiv内のボタンはここにコードです」 –

+0

はい、私は質問を読んで、OPコードスニペットを実行してj08691答えを実行すると、あなたの答えは偽です。 – Gintoki

0

なぜあなたは$を使用してはいけない。この

$('div, button').click(function(){ 
    $('.div').toggle('hide'); 
    console.log("hello"); 
    return false; 
}) 
関連する問題