Databases
StackOverflow2013
Postsdbo
POWhat is the most efficient way to do this process in jQuery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is the most efficient way to do this process in jQuery?
    text
    copied!<p>This works flawlessly, but somehow I think there are easier and quicker ways to do this. I'm unsure, and I'm looking for suggestions. Here's the code:</p> <pre><code> /* create a hover event and a click event */ // set the status of whether the box is open or closed var status = 0; // remove the css hover state (fall back hover) $("#testApp").off("hover"); // add a jQuery mouseover and mouseout event $("#testApp").on("mouseover", function() { $("#testApp div").css({ "background-image":"url(./images/svg/menucorner-bg-lit.svg)" }); }); $("#testApp").on("mouseout", function() { $("#testApp div").css({ "background-image":"url(./images/svg/menucorner-bg.svg)" }); }); // create a click event $("#testApp").on("click", function() { if(status == 0) { // remove the mouseover and mouseout event when the div opens $("#testApp").off("mouseover"); $("#testApp").off("mouseout"); $("#testApp div").css({ "background-image":"url(./images/svg/menucorner-bg-lit.svg)", "height":"200px", "background-color":"#ccc" }); return status = 1; }else{ // add the mouseover and mouseout event when the div closes $("#testApp").on("mouseover", function() { $("#testApp div").css({ "background-image":"url(./images/svg/menucorner-bg-lit.svg)" }); }); $("#testApp").on("mouseout", function() { $("#testApp div").css({ "background-image":"url(./images/svg/menucorner-bg.svg)" }); }); $("#testApp div").css({ "height":"50px", "background-color":"transparent" }); return status = 0; } }); </code></pre> <p>So basically it creates a hover state and a click toggle. Is there a more efficient way to do this?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload