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();
        });
    });

在jquery中，当我点击关闭链接并在div之外我的切换类没有得到隐藏

1 个答案: