jQuery 在悬停时显示/隐藏//单击时显示

Question

我有一个与此相关的问题:

jQuery hover (show-hide)

然而，在他的 fiddle 中，

http://jsfiddle.net/Q5cRU/27/

他有两个 div

<div id="rectangle"></div>
<div class="rectangle1"></div>

它们相似，但颜色不同

      rectangle {
      width: 140px; 
      height: 80px;
      background: #037CA9;
      margin-bottom:10px;
}

      .rectangle1 {
      width: 140px; 
      height: 150px;
      background: #37CA90;
}

他如何能够单击深蓝色矩形以使浅蓝色矩形保持不变？

如果您加载 fiddle ，所有代码都在那里。

Answer 1

保留一个状态标志，如果单击矩形，该状态标志就会切换:

$(document).ready(function(){
  var clicked=false;

  $('.rectangle1').hide();

    $('#rectangle').on('click', function() {
        clicked = !clicked;
    });

    $('#rectangle').hover(
      function() {
        $('.rectangle1').show()}
      ,function() {
          if (!clicked) {
             $('.rectangle1').hide()
          }
      }
    );  
});

jsFiddle:http://jsfiddle.net/Q5cRU/34/

同样，再次单击它可以隐藏底部矩形。