Klicken Sie auf Inhalt anzeigen und Inhalt der Hover-Aktualisierung anzeigen

Question

Ich habe eine Reihe von Schaltflächen, die den zugehörigen Inhalt anzeigen, wenn Sie darauf klicken oder die Maustaste gedrückt halten. Aber jetzt möchte ich, dass der Inhalt vorübergehend aktualisiert wird, wenn eine andere Schaltfläche gedrückt wird, während eine bereits angeklickt ist.

Das Problem ist also, wenn ich den Mauszeiger über den anderen Knopf halte, während einer bereits angeklickt ist, wird es den Inhalt davon anzeigen. Aber wenn meine Maus verlässt, wird sie nicht zu dem Inhalt von der Taste zurückkehren, die gerade geklickt hat.

meinen Code Siehe:

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

sehen meine Geige: https://jsfiddle.net/8fp62L9g/

Answer 1

Ist das, was Sie brauchen?

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

auf diese Weise versuchen.

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