Question

大家好我已经完成了这个脚本，我希望点击.content div淡出$('.d-menu')元素，但是当我点击.d-menu不能正常工作时， fadeIn和fadeOut非常快:( 附： .content是主要div http://jsfiddle.net/valeri879/abn8x46n/

<div class="f-menu"></div >
<div class="d-menu">
    <ul>
        <li><a href="#">about</a></li>
        <li><a href="#">projects</a></li>
        <li><a href="#">help</a></li>
    </ul>
</div>
$(document.body).on('click','.f-menu',function(){
    $('.d-menu').fadeToggle(200);
});
$(document.body).on('click','.content',function (){
    $('.d-menu').fadeOut();
})

Answer 1

见下面的答案
使用event.stopPropagation（）;

 <div class="content" style="width:500px; height:500px; background:#ccc;">
        <div class="f-menu">asdasdasd</div>
        <div class="d-menu">
            <ul>
                <li><a href="#">about</a></li>
                <li><a href="#">projects</a></li>
                <li><a href="#">help</a></li>
            </ul>
        </div>

    </div>

    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $(document.body).on('click', '.f-menu', function (event) {
                event.stopPropagation();
                $('.d-menu').fadeToggle(200);
            });
            $(document.body).on('click', '.content', function (event) {
                event.stopPropagation();
                $('.d-menu').fadeOut(200);
            });
            $(document.body).on('click', '.d-menu', function (event) {
                event.stopPropagation();                   
            });
        });

    </script>

希望这有帮助

如何在内容div中淡出div

1 个答案: