クリックを聞くための別の機能を追加するにはどうすればよいですか？

Question

私はメニューを閉じるためのクローズアイコンを追加することで、ナビゲーションバーをスライドアウトしています。

メニューが出てきた後、ように引っ込むの上にマウス・オン

：ややjQueryを使って遊ん

$(window).load(function(){ 
    $("#brgr").hover(
    function() { 
     $("#menu-full-size").addClass("is-open"); 
    }, 
    function(){ 
     $("#menu-full-size").hover(
     function(){ 
      $("#menu-full-size").addClass("is-open"); 
     }, 
     function(){ 
      $("#menu-full-size").removeClass("is-open"); 
     } 
    ); 
    } 
); 
}); 

、上記の構文は、一種の投げた私...

私が追加しましたホバーを探すための機能、次にスライドをメニューから見えるようにするもう1つのホバーリスナー...しかし、クローズアイコンのクリックを聞くにはどうすればいいですか？removeClass.is-open？

$('.close-nav-x').click(function(){ 
    $("#menu-full-size").removeClass('is-open'); 
}); 

を、以下のようにコードを変更： - - ：

<div id="menu-full-size"> 
    <div class="close-nav"> 
    <svg viewbox="0 0 40 40"> 
     <path class="close-nav-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /> 
    </svg> 
    </div> 
    <h2>Rest of menu stuff</h2> 
</div> 

Answer 1

あなたは以下のようにクリックイベントを使用することができます

$(window).load(function(){ 
    $("#brgr").hover(function() { 
     $("#menu-full-size").addClass("is-open"); 
    }, function() { 
     $("#menu-full-size").removeClass("is-open"); 
    }); 

    $("#menu-full-size").hover(function() { 
     $("#menu-full-size").addClass("is-open"); 
    }, function() { 
     $("#menu-full-size").removeClass("is-open"); 
    }); 
    $('.close-nav-x').click(function(){ 
     $("#menu-full-size").removeClass('is-open'); 
    }); 
}); 

を一度これを試してみて、私が働いていたか知っています： -

$(window).load(function(){ 

    $("#brgr, #menu-full-size").hover(function() { 
     $("#menu-full-size").addClass("is-open"); 
    }, function() { 
     $("#menu-full-size").removeClass("is-open"); 
    }); 

    $('.close-nav-x').click(function(){ 
     $("#menu-full-size").removeClass('is-open'); 
    }); 
}); 

Answer 2

もし私がこのストレートこのT仕事

jQueryの

$(window).load(function(){ 
    $("#brgr, #menu-full-size").on('mouseover', function() { 
     $("#menu-full-size").addClass("is-open"); 

     $('.close-nav-x').on('click', function() { 
     $("#menu-full-size").removeClass("is-open"); 
     }); 
    }); 
}); 

を行うことができますしかし、あなたはclickイベントをトリガする.close-nav-xクラス要素を使用したいと私は間違いなくそのclickイベントは、より良いあなたが交換する必要があり、SVGにトリガされませんしましたそれはボタンとスタイルをCSSを使用しています。

HTML

<div id="menu-full-size"> 
    <div class="close-nav"> 
    <button class="close-nav-x">X</button> 
    </div> 
    <h2>Rest of menu stuff</h2> 
</div>