コンテンツを表示し、ホバーアップデートのコンテンツをクリックしてください

Question

私は、クリックしたりホバリングしたときに関連コンテンツを表示するボタンの行を持っています。しかし、今は、もうひとつのボタンがクリックされている間に、他のボタンがクリックされたときにコンテンツが一時的に更新されるようにしたい。

問題は、もう1つボタンをクリックしている間に他のボタンの上にカーソルを置くと、その内容が表示されることです。しかし、私のマウスがから離れると、現在クリックされているボタンからコンテンツに戻ることはありません。

は私のコードを参照してください：

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