Box felfedése-elrejtése javascripttel (mellé kattintással is záródik)

Sajnálatos módon nem vagyok programozó, de lelkesen dolgozok a probélma megolsásán. És rendszerint, bár egy szakmabelihez képset lassabban, de eljutok a megoldáshoz. Így volt ez ebben az esetben is.

 

Egy doboznak kellett megnyílni kattintásra (konkrétan VM kosár modulban), majd bezáródni, de akkor is, ha máshova kattintok. A korábbi megoldás (toggle) hibája az volt, hogy ha mellé kattintottam, maga a váltás (toggle) nem futott le, így a következő kattintás látszólag nem jelenítette meg a boxot.

Az alábbi példa a végül működő kód egyszerűsített leirata. HTML rész:

<a class="boxtoggle">       
  <div class="products"><?php  echo  $totalProductTxt;?></div>         
</a>
<div class="togglebox" style=" display: none; ">...
</div>

Ez pedig a javascript rész (Joomlán ha jól tudom, egy korábban betöltött script könyvtárral akad össze, elvileg noConflic-al megoldható, de így is működik):

<script>
    jQuery(".boxtoggle").click( function(event){        
         event.stopPropagation();        
         jQuery(".tobblebox").toggle(300);    
    });
    jQuery(document).click( function(){        
         jQuery(".togglebox").hide(300);    
    });
</script>

És itt egy demo CSS kiegészítés a megjelenő dobozhoz:

.togglebox { 
   padding: 10px 10px 15px;    
   display: block;    
   position: absolute;    
   background: rgb(255, 255, 255);    
   z-index: 100;    
   border: 1px solid rgb(221, 221, 221);    
   margin-top: 34px;    
   min-width: 300px !important;
 }