javascript - 如何检查切换功能是否显示项目？

Question

我有这个代码...

<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”。我怎样才能做到这一点？我希望我的问题很清楚。感谢您的回答。

Answer 1

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>