Question

我有一排按钮，当点击或悬停时会显示相关内容。但是现在我希望在其他按钮悬停的同时暂时更新内容，同时单击一个按钮。

所以问题是当我将鼠标悬停在另一个按钮上并且已经点击了一个按钮时，它将显示它的内容。但是当我的鼠标离开时，它将不会返回到当前点击的按钮中的内容。

请参阅我的代码：

 <div id="showcaseBttns">
  <a class="bttns" target="1">work 1</a>
  <a class="bttns" target="2">work 2</a>
  <a class="bttns" target="3">work 3</a>
</div>

<div id="main_left">
  <div id="work_main1" class="targetDiv">work 1</div>
  <div id="work_main2" class="targetDiv">work 2</div>
  <div id="work_main3" class="targetDiv">work 3</div>
</div>


var clicked = false;

$('[id ^= "work"]').hide();

$('.bttns').click(function() {

  clicked = !clicked;
  $('.targetDiv').hide();
  $('#work_main' + jQuery(this).attr('target')).show();

});

$('.bttns').hover(
  function() {
    $('#work_main' + jQuery(this).attr('target')).show()
  },
  function() {
    if (!clicked) {
      $('#work_main' + jQuery(this).attr('target')).hide()
    } else {
      $('#work_main' + jQuery(this).attr('target')).show()
    }
  });

看我的小提琴：https://jsfiddle.net/8fp62L9g/

Answer 1

这是你需要的吗？

var $clicked;

	$('[id ^= "work"]').hide();

	$('.bttns').click(function() {
    var $newClicked = $(this),
      newClicked = $newClicked.attr('target'),
      oldClicked = $clicked && $clicked.attr('target');
      
    if (oldClicked && oldClicked === newClicked) {
      $('#work_main' + newClicked).hide();    
      $clicked = undefined;
      return;
    } 
    
	  $clicked = $newClicked;
	  $('.targetDiv').hide();
	  $('#work_main' + newClicked).show();

	});

	$('.bttns').hover(
	  function() {
      var hovTarget = $(this).attr('target');
	    $('#work_main' + hovTarget).show();
      if ($clicked && $clicked.attr('target') !== hovTarget) {
        $('#work_main' + $clicked.attr('target')).hide();
      }
	  },
	  function() {
	      $('.targetDiv').hide();
	      $clicked && $('#work_main' +$clicked.attr('target')).show();
	  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcaseBttns">
  <a class="bttns" target="1">work 1</a>
  <a class="bttns" target="2">work 2</a>
  <a class="bttns" target="3">work 3</a>
</div>

<div id="main_left">
  <div id="work_main1" class="targetDiv">work 1</div>
  <div id="work_main2" class="targetDiv">work 2</div>
  <div id="work_main3" class="targetDiv">work 3</div>
</div>

Answer 2

尝试这种方式。

var clickedId = null;

$('[id ^= "work"]').hide();

$('.bttns').click(function() {

  clickedId = jQuery(this).attr('target');
  $('.targetDiv').hide();
  $('#work_main' + jQuery(this).attr('target')).show();

});

$('.bttns').hover(
  function() {
    $('#work_main' + jQuery(this).attr('target')).show()
  },
  function() {
      $('#work_main' + jQuery(this).attr('target')).hide()
    if(clickedId!==null) {
      $('#work_main' + clickedId).show()
    }
  });

单击显示内容和悬停更新内容

2 个答案: