Javascript jQuery显示/隐藏div更好的解决方案

Question

I have two buttons here, and when I hover one of the button, it'll show a div with information(left to right). If the cursor is not on the buttons nor the div, it'll hide. Here is my code, it works for me , but I want to know better solutions than mine. :D Thank you!

HTML:

<button id="Btn_Nav_Equipment" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)" ><span></span></button>
<button id="Btn_Nav_Report" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)"><span></span></button> 

<div id='Panel_Equipment' style="display:none;" onmouseover="Set_Panel_Nav()"onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
<div id='Panel_Report' style="display:none;" onmouseover="Set_Panel_Nav()" onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>

Javascript:

var Btn_Nav=false;
var Panel_Nav=false;

function Nav_Over(id){
  var str=id.split('_');
  var Panel_id='Panel_'+str[2];
  $('#'+Panel_id).animate({width:'show'},300);
}

function Nav_Out(id){
  var str=id.split('_');
  var Panel_id='Panel_'+str[2];   
  if(( Btn_Nav==false)&&(Panel_Nav==false)){
    $('#'+Panel_id).animate({width:'hide'},300);
  }
}
function Nav_Panel_Out(id){
  $('#'+id).animate({width:'hide'},300);
}


function Set_Btn_Nav(){
  Btn_Nav=true;
}

function Set_Panel_Nav(){
Panel_Nav=true;
}

function Leave_Btn_Nav(){
Btn_Nav=false;
}

function Leave_Panel_Nav(){
Panel_Nav=false;
}

Answer 1

Trying to answer the question without being able to run your code so it would work, so I'm answering the text itself - the approach I'd take on this would be without javascript. It's rather simple, take a look!

 .info-button { padding: 5px 10px; background: #afa; display: inline-block; position: relative; } .info-box { display:none; } .info-button:hover .info-box { display: block; position: absolute; top: 100%; left: 0; width: 300px; padding: 0 20px 10px; background: #faa; } 

 <div class="info-button"> <button>Hover me</button> <div class="info-box"> <h1>More info</h1> <p>Lorem ipsum dolor sit amet.</p> </div> </div> <div class="info-button"> <button>Hover me</button> <div class="info-box"> <h1>More info</h1> <p>Lorem ipsum dolor sit amet.</p> </div> </div> 

Answer 2

I would prefer doing such things by using HTML and CSS3 only.

 button { width: 40px; height: 40px; position: relative; } button > div.panel { position: absolute; z-index: 1; top: 20px; left: 40px; transition: all .3s; visibility: hidden; opacity: 0; width: 200px; height: 80px; background: white; border: 2px solid; } button:hover > div.panel { visibility: visible; opacity: 1; } 

 <button> B1 <div class="panel" id="Panel_Equipment">Panel_Equipment</div> </button> <button> B2 <div class="panel" id="Panel_Report">Panel_Report</div> </button> 

Answer 3

 $('.btn').hover(function(){ $('#'+$(this).data('open')).animate({width:'200px'},300); },function() { $('#'+$(this).data('open')).animate({width:'0px'},300); }); 

 div { width:0; overflow:hidden; background: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn" data-open="Panel_Equipment" ><span>asdada</span></button> <button class="btn" data-open="Panel_Report"><span>sdasda</span></button> <div id='Panel_Equipment'>text 1</div> <div id='Panel_Report'> text 2</div> 

Answer 4

Try with hover() function of jquery.And remove the inline mouseover

 $('button').hover(function(){ $('#'+$(this).attr('data-target')).animate({width:'show'},300); },function(){ $('.panel').animate({width:'hide'},300); }) 

 .panel{ width:100px; height:50px; border:1px solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="Btn_Nav_Equipment" data-target="Panel_Equipment">one<span></span></button> <button id="Btn_Nav_Report" data-target="Panel_Report">two<span></span></button> <div id='Panel_Equipment' class="panel" style="display:none;">Panel_Equipment</div> <div id='Panel_Report' class="panel" style="display:none;">Panel_Report</div> 

Answer 5

Here's a simple CSS3 solution, toggling a class on hover with jQuery :

 let $info = $(".info") $("button").hover( () => { $info.addClass("onscreen") }, () => { $info.removeClass("onscreen") }) 

 button { margin: 20px; } div.info { position: absolute; top: 50px; width: 200px; height: 200px; background: #90ee90; display: flex; justify-content: center; align-items: center; transform : translateX(-100%); opacity : 0; transition: all 0.3s ease-in-out; } div.info.onscreen { transform: translateX(0); opacity : 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Hover me</button> <div class="info"> <span>Div content</span> </div> 

Answer 6

Try using the below solution.

 $(document).on("mouseover",".btn,.panel",function(){ if($(this).hasClass("panel")){ $(this).removeClass("collapsed"); } else{ var panel = $(this).attr("data-panel"); $("."+panel).removeClass("collapsed"); } }); $(document).on("mouseout",".btn,.panel",function(){ $(".panel").addClass("collapsed"); }); 

 .collapsed{ display:none; } 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <button class="btn_Equipment btn" data-panel="Panel_Equipment"><span>Equipment</span></button> <button class="btn_Report btn" data-panel="Panel_Report"><span>Report</span></button> <div class='Panel_Equipment collapsed panel'>Equipment Div </div> <div class='Panel_Report collapsed panel'>Report Div</div>