點擊顯示內容並懸停更新內容

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; 
 

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

 
\t $('.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; 
 
    } 
 
    
 
\t $clicked = $newClicked; 
 
\t $('.targetDiv').hide(); 
 
\t $('#work_main' + newClicked).show(); 
 

 
\t }); 
 

 
\t $('.bttns').hover(
 
\t function() { 
 
     var hovTarget = $(this).attr('target'); 
 
\t  $('#work_main' + hovTarget).show(); 
 
     if ($clicked && $clicked.attr('target') !== hovTarget) { 
 
     $('#work_main' + $clicked.attr('target')).hide(); 
 
     } 
 
\t }, 
 
\t function() { 
 
\t  $('.targetDiv').hide(); 
 
\t  $clicked && $('#work_main' +$clicked.attr('target')).show(); 
 
\t });

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