在 jquery 中，当我单击关闭链接并在 div 外部时，我的切换类没有隐藏

Question

我正在做切换类来隐藏和显示，切换类工作正常，但是当我点击“关闭”链接并且在 div 之外当前显示的 div 没有隐藏，我是 jquery 的新手。如果有人知道这个答案，请帮助我，我已经在下面添加了一个代码。

HTML代码

<div class="NoViews">
        <img src="~/Content/Theme/images/fav.png" alt="">
        <p>Shortlist</p>
        <span>1</span>
    <div class="shortlistProperty">
        <div class="shortlistHeader">
             <h5>Shortlisted properties (1)
                 <p class="flRight"><a class="closeShortlist" href="#">Close</a></p>
             </h5>
        </div>
        <div class="shortlistBody">
             Div content
        </div>
    </div>
</div>

jquery 代码

$(document).ready(function () {
            $(".shortlistProperty").hide();
            $(".mySearchProperty").hide();                
            $(".NoViews").click(function () {
                $('.shortlistProperty').toggle();
                $('.mySearchProperty').hide();
            });
            $(".closeShortlist").click(function () {
                $('.shortlistProperty').toggle();
                $('.shortlistProperty').toggle(false);
            });
            $(".searchView").click(function () {
                $('.mySearchProperty').toggle();
                $('.shortlistProperty').hide();
            });
            $(".closemySearch").click(function () {
                $('.mySearchProperty').toggle();
                $('.mySearchProperty').toggle(false);
            });
        });  

在此，我希望当我单击该关闭链接时，我当前的 div 必须隐藏，而当我单击外部时，当前 div 必须关闭。

Answer 1

您必须停止活动气泡。检查代码。

$(document).ready(function () {
        $(".shortlistProperty").hide();
        $(".mySearchProperty").hide();
        $(".NoViews").click(function (e) {
            $('.shortlistProperty').toggle();
            $('.mySearchProperty').hide();
            e.stopPropagation();
        });
        $('.shortlistProperty').click(function (e) {
            e.stopPropagation();
        });
        $(".closeShortlist").click(function (e) {
            $('.shortlistProperty').toggle();
            e.stopPropagation();
        });
        $(".searchView").click(function (e) {
            $('.mySearchProperty').toggle();
            $('.shortlistProperty').hide();
            e.stopPropagation();
        });
        $(".closemySearch").click(function (e) {
            $('.mySearchProperty').toggle();
            e.stopPropagation();
        });
        $('body').click(function (e) {
            $('.shortlistProperty').hide();
        });
    });