I need help with these two functions

The first one displays the div, the second one hides the dive up on clicking anywhere else in the document. the problem i have is, when i click the button to show the div, it also counts as a document click so it hides the div. how can i it make not hide the div when i cli开发者_运维问答ck to show the div

<script type="text/javascript">
    function test22(){  

        var links = document.getElementById('links_safari');
        if(links.style.display == "none"){

            document.getElementById('links_safari').style.display="";
            var content = $('#links_safari').html();             
            var words = content.split(',');             
            for (var i = 2; i < words.length; i += 3) { 
                words[i] += '<br>'; 
            }
            content = words.join(' ');  
            $('#links_safari').html(content); 

            $('#links_safari').css("margin-top", -322);
            $('#links_safari').css("margin-left", 180);
            safariPopupStatus++;
        }
        else{
            links.style.display="none";

        }
    }



</script>

<script type="text/javascript">
    $(function (){

        $(document).click(

            function (e){
                var links = document.getElementById('links_safari');

                links.style.display="none";
                }  
        )
    })
</script>

lets suppose the id of your button is showBtn the code now will be

$(document).click(

            function (e){
                if($(e.target).attr('id')=='showBtn') return

                var links = document.getElementById('links_safari');
                if(links.style.display != "none") // why not check here ?
                  links.style.display="none";

                }  
        )

Have a simple check in your "click" function :

<script type="text/javascript">
    $(function (){

        $(document).click(

            function (e){
                var links = document.getElementById('links_safari');
                if(links.style.display != "none") // why not check here ?
                  links.style.display="none";
                else
                   links.style.display="";

                }  
        )
    })
</script>

You must stop click event propagation. Check out http://api.jquery.com/event.stopPropagation/

Create a separate click handler for your button. It should look like:

$("#buttonID").click(function(e) {
    test22(); // to show
    e.stopPropegation();
});

stopPropegation will keep the event from bubbling up to the document level, preventing the handler from being called there.

You can and also probably should put the show code from test22() into your button handler and have the document handler just handle hiding.