CODEWITHSUNDEEP
javascriptjquery
Val Do
Val Do

Reputation: 2695

How to fadeOut div inside content div

Hello all I've this script and I want when I click .content div fade $('.d-menu') element, but when I click .d-menu not work good, it fadeIn and fadeOut very fast :( p.s. .content is main 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();
})

Upvotes: 2

Views: 55

Answers (1)

Frebin Francis
Frebin Francis

Reputation: 1915

See the answer below
use 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>

Hope this helps

Upvotes: 2

Related Questions