それ以外の

Question

をクリックしてスライドのdivを閉じて、私は私の問題への解決策を見つけるために時間を費やしたが、何もまだ働いていない：/

私は正常に動作しているthis penを作りました。これは、（jsfiddleに基づいて）オープン/クローズボタンを備えた基本的なスライドメニューですが、私はユーザーがメニューを閉じることができるようにする機能を追加したいと思います。

ここではコードです：

HTML

<div class='header'> 
    <span class='button'>&#9776;</span> 
    <span class="logo">LOGO HERE</span> 
</div> 
<div class='side-panel'> 
    <nav> 
    <ul> 
     <li><a href='#'>ITEM 1</a></li> 
     <li><a href='#'>ITEM 2</a></li> 
     <li><a href='#'>ITEM 3</a></li> 
    </ul> 
    </nav> 
</div> 
<div class='content'>CONTENT HERE</div> 

JS

$('.button').click(function(){ 
    if($(this).hasClass('active')){ 
    $(this).removeClass('active'); 
     $(this).html("☰"); 
    $('.side-panel').animate({ 
    right:"-220px" 
    }); 
    $(this).animate({ 
    right:"0" 
    }); 
    } 
    else{ 
    $(this).addClass('active'); 
    $(this).html("╳"); 
    $('.side-panel').animate({ 
    right:"0", 
    }); 
    $('.button').animate({ 
    right:"220px" 
    }); 
    } 
}); 

私はここにいくつかの非常に興味深いトピックを発見し、私はこれを追加しようとしました：

$(document).click(function(){ 
    if ($('.button').hasClass('active')){ 
    $(this).removeClass('active'); 
    } 
}); 

は、しかし働いていない。 Jsの知識は基本的なものです（私の英語では申し訳ありません）。私は解決策から遠くないと確信していますが、3時間以上を過ごしてしまいました。十分なはっきりしていますが、詳細が必要な場合はお気軽にお問い合わせください。乾杯、助けてくれてありがとう。

CODEPEN

Answer 1

間に合わせ：

行為あなたがコンテンツをクリックすると、ボタンが押されたかのように：

$('.content').click(
    function() { 
     $(".button").click(); 
    }); 

よりよい：

.buttonクリックからコードを抽出イベントを2回呼び出します。

$('.button').click(function(){ 
    showhide(); 
}); 

$('.content').click(function() { 
    showhide(); 
}); 

function showhide() 
{ 
    var $this = $(".button"); 
    if($this.hasClass('active')){ 
    $this.removeClass('active'); 
    $this.html("☰"); 
    $('.side-panel').animate({ 
    right:"-220px" 
    }); 
    $this.animate({ 
    right:"0" 
    }); 
    } 
    else{ 
    $this.addClass('active'); 
    $this.html("╳"); 
    $('.side-panel').animate({ 
    right:"0", 
    }); 
    $('.button').animate({ 
    right:"220px" 
    }); 
    } 
} 

Answer 2

最終的に解決策が見つかりました。私はちょうどこれを追加しました：

は

$('.content').click(function() { 
    if($('.button').hasClass('active')){ 
    $('.button').removeClass('active'); 
    $('.button').html("☰"); 
    $('.side-panel').animate({ 
    right:"-220px" 
    }); 
    $('.button').animate({ 
    right:"0" 
    }); 
    } 
}); 

さて、コンテンツ内の任意のクリックはあなたが私に答えるために要した時間のためのdiv .sideパネル