jQuery動態顯示Div，按Div以外的地方就隱藏Div

2012-12-06

40280
0

Dotblogs 的標籤：jQuery ,隨手記

同事的進度落後太多，只好一直寫範例。這個範例很簡單，就按一個超連結就顯示 Div，按 Div 中的【關閉】鈕或 Div 以外的地方就隱藏，當然也是用 jQuery 處理。

    <head>
        <title></title>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
    </head>
    <script type="text/javascript">
        $(function(){
            $("#divShow").hide();
            
            $('body').click(function(evt) {
                if($(evt.target).parents("#divShow").length==0 && 
                    evt.target.id != "aaa" && evt.target.id != "divShow") {
                    $('#divShow').hide();
                }
            });
        });
    </script>
    <body>
    <a id="aaa" name="aaa" onclick="$('#divShow').show();" href="#">按這裡就顯示Div</a>
        <div id="divShow" name="divShow" style="width: 500px; height: 350px;border-width:2px; border-style:dotted;">
        <input type="button" id="btnCloseDiv" name="divCloseDiv" value="關閉" onclick="$('#divShow').hide();" />
        <p>this is a div.</p>
        <table id="tbl" style="width: 300px; height: 300px; border:#0000FF 1px solid; ">
            <tr><th>thhhhhhhhhhhhhhh</th></tr>
            <tr><td>tddddddddddddddd</td></tr>
        </table>
        </div>
    </body>
</html>

重點其實有三點：

1. 因為動態顯示、隱藏的 Div （divShow）裡面還有其他標籤，所以我們利用：

找到滑鼠點擊到的目標物件，其上層是否包含 divShow，若有，表示我們點擊的是 Div 中的項目，所以保留顯示 Div。

2. 若點擊的是 Div 本身，那也要保留顯示，所以在隱藏動作之前的判斷要排除自己：

3. 若點擊的是用來顯示 Div 的超連結，當然也不要把 Div 給隱藏起來：

為了方便識別，固定加框線和顏色，顯示 Div 的畫面如下：
 

滑鼠點擊黑色框線以外的地方，Div 就會隱藏，點擊黑色框線內的任何地方，都會保留顯示 Div。按【關閉】鈕，也會隱藏 Div。
                    
	--------

	沒什麼特別的~

	不過是一些筆記而已