jQuery Show/Hide on Hover // 点击时显示答案

【问题标题】：jQuery Show/Hide on Hover // Show on ClickjQuery Show/Hide on Hover // 点击时显示
【发布时间】：2014-12-26 17:50:55
【问题描述】：

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

jQuery hover (show-hide)

然而，在他的小提琴中，

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;
}

他怎么能点击深蓝色的矩形，让浅蓝色的矩形不动？

如果你加载小提琴，所有的代码都在那里。

【问题讨论】：

rectangle 正在寻找您没有的 type <rectangle> 元素，因此选择器不会匹配任何元素。
是this你想要什么？？？
好吧，在我弄清楚如何正确编码之前，我将他的设置用作我自己的设置。如果我有和他一样的代码，两个矩形和所有，但我只想在单击深蓝色时保持浅绿色矩形可见。

标签： jquery html hover click hide

【解决方案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/

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

【讨论】：

这正是我所需要的。你说的州旗是什么意思？这东西不是最好的。
它只是一个简单的布尔值，它记住用户是否点击的“状态”。我们只需点击一下即可切换它。

【解决方案2】：

替换javascript代码：

$(document).ready(function(){
    $('.rectangle1').hide();

  $('#rectangle').click(function() {
 $('.rectangle1').show()
  });
});

【讨论】：

我也需要原件才能工作。我只是希望能够单击深蓝色并使绿色矩形保持不变。
如果你想当你点击深蓝色，Light One Show And Stay 时，用这段代码替换你的 JQuery。

【解决方案3】：

$(document).ready(function(){
    $('.rectangle1').hide();

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

在这段代码中，很明显，在 id 等于 rectangle 的悬停矩形上，向我们显示了 rectangle1。这是简单的jquery代码。

【讨论】：

【解决方案4】：

您只需要删除该类并添加一个包含相同 css 属性的类似类，这样在单击后将不会触发悬停。这是更新后的fiddle。

$('#rectangle').click(function(){
    $('.rectangle1').addClass('rectangle2');
    $('.rectangle1').removeClass('rectangle1');
});

CSS

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

编辑：代码优化，fiddleJS 链接更新。

【讨论】：