如何检查切换功能是否显示项目?
How to check if toggle function show item?
我有这个代码...
<div class="btn1">Button</div>
<div class="text1">Some text</div>
...
$(document).ready(function(){
$(".btn1").click(function(){
$(".text1").toggle();
});
});
<div class="block2">Some text 2</div>
我想在切换功能显示“.text1”时隐藏“.block2”,在隐藏“.text1”时显示“.block2”。我怎样才能做到这一点?我希望我的问题很清楚。感谢您的回答。
1) see this http://jsfiddle.net/a6kqvLj8/
Just make the second block diaplay:none
, and do the same operations
on it
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
$(".block2").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2" style='display:none;'>Some text 2</div>
2) Or if you want the both blocks to be visible at first, and the
start toggling on click, you can do this:
http://jsfiddle.net/a6kqvLj8/1/
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
if ($(".text1").css('display') == 'none') {
$(".block2").css('display', 'block');
} else {
$(".block2").css('display', 'none');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2">Some text 2</div>
我有这个代码...
<div class="btn1">Button</div>
<div class="text1">Some text</div>
...
$(document).ready(function(){
$(".btn1").click(function(){
$(".text1").toggle();
});
});
<div class="block2">Some text 2</div>
我想在切换功能显示“.text1”时隐藏“.block2”,在隐藏“.text1”时显示“.block2”。我怎样才能做到这一点?我希望我的问题很清楚。感谢您的回答。
1) see this http://jsfiddle.net/a6kqvLj8/
Just make the second block
diaplay:none
, and do the same operations on it
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
$(".block2").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2" style='display:none;'>Some text 2</div>
2) Or if you want the both blocks to be visible at first, and the start toggling on click, you can do this: http://jsfiddle.net/a6kqvLj8/1/
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
if ($(".text1").css('display') == 'none') {
$(".block2").css('display', 'block');
} else {
$(".block2").css('display', 'none');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2">Some text 2</div>