Question

I have a UL with an LI inside of it, when i click on the UL, the LI inside of it fades in. The Li has an input inside of it (search form), next to it i have a select input to select the section of the website you want to search.(both inside of the LI)

I’m trying to get it so that when focus leaves the LI and everything inside of it(select input, search input), it fades out. BUT, right now my code makes it so that when you click the UL to fade in the LI, it fades in, and then i click on the search input, but when i click on the other input inside of the LI(select input), the LI will flash, then if i click back on the search input, the LI will fade out… GAH! i just want the LI to fade out when it and everything inside of it all DO NOT have focus anymore. Any help would be greatly appreciated.

html:

<ul class="ulsearch">

    <li class="lisearch">

        <input type="text" id="search" />

        <select>
        <option>EVERYTHING</option>
        <option>MUSIC</option>
        <option>VIDEOS</option>
        </select>

    </li>
</ul>

jquery:

$('.ulsearch').click(function() {

    $('.lisearch').fadeIn(100);

});

$('.lisearch').focusout(function() {

    $('.lisearch').fadeOut(100);

});

Answer 1

I just learned that a div can’t have focus unless you apply an index to it, but the w3c says only specific elements should have an index set to them, but does anyone get the idea i’m trying to accomplish and have a way to make it work?