Aiuto simulazione comportamento select personalizzato in jQuery

Ho creato tramite, l'aiuto dei css, dei select personalizzati, con una struttura del genere:

Codice:

---

<div id="fake-select">
  Testo dentro il select.
  <div>
      <ul>
        <li>Primo elemento</li>
        <li>Secondo elemento</li>
      </ul>
  </div>
</div>

---

Grazie al css il div all'interno non è visibile, grazie al jQuery questo appare solo se clicci sul div principale, ora, prima di fare questo, o scritto un pezzo di codice che si esegue al click su ogni elemento della pagina, e chiude i div visibile, i select aperti, nel mio caso, ma tutto questo non funziona, il codice jQuery è questo:

Codice:

---

  $(document).ready(function()
  {     
      $(this).click(function()
      {
        var fsl = $("div.fake-select div");
       
        for (var i = 0; i < fsl.length; i++)
        {
            if (fsl.eq(i).is(":visible")) {
              fsl.eq(i).hide();
            }
        }
      });
     
      $("div.fake-select").click(function()
      {
        $(this).children("div").show();
      });
  });

---

Premetto che le due istruzioni ( $(this).clic() e $("div.fake-select").click() ) funzionano solamente se non sono state dichiarate tutte e due insieme all'interno del codice, non so se mi spiego.

Come potrei risolvere questo problema?