javascript - 如何淡出内容 div 内的 div

Question

大家好，我有这个脚本，我希望当我点击 .content div fade $('.d-menu')元素，但是当我单击 .d-menu 时效果不佳，它淡入和淡出非常快:( 附注 .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>

希望这有帮助