当用户使用jQuery在其外部单击时隐藏DIV

时间:2015-09-04 10:56:34

标签: javascript jquery html css

我正在使用此代码:

$(document).ready(function(){
    $(".SlideDiv").hide();
    $(".Show_hide").show();

    $('.Show_hide').click(function(){
        $(".SlideDiv").slideToggle();
    });
});

这个HTML:

    <a href="#" class="Show_hide">Show/hide</a>
<div class="SlideDiv">this is content page
<a class="agree" href="https://www.google.com/" target="_blank">google</a>
</div>

这个CSS:

.SlideDiv
{  
    height:200px;
    background-color:gray;
    margin-top:10px;

}
.Show_hide
{
    display:none;
}

问题是我在DIV内部有链接,当他们点击该链接打开但显示功能没有隐藏。

Demo

2 个答案:

答案 0 :(得分:1)

你可以用js&#34; mousedownoutside.js&#34;使用以下代码

http://benalman.com/projects/jquery-outside-events-plugin/

    $('yourDiv').on('mousedownoutside', function(event){
    var target = $( event.target );
    if($(this) != target){
        $(this).slideUp();
    }

});

答案 1 :(得分:0)

<强> DEMO

无需使用任何插件。您只需将文档上的每次单击绑定到一个函数,并检查对象上的单击是否不是任何功能链接。 event.stopPropagation()用于防止事件冒泡。

&#13;
&#13;
    String x = JOptionPane.showInputDialog(null, "Hur många värden haver du?");

    int i = Integer.parseInt(x);
    int sum = 0;
    for (int y = 0; i > y; y++) 
    {
        String z = JOptionPane.showInputDialog(null, "Skriv in värdet");
        sum = (sum + Integer.parseInt(z));
    }
    System.out.println(sum);
&#13;
Input: 3 (number of iterations)
Input: 7
Input: 5
Input: 6
Output: 18
&#13;
&#13;
&#13;