jquery - jQuery と CSS のクリックして切り替えるメニューの動作がおかしい

Question

jQuery のポップアップ メニューで、あらゆる種類の奇妙で風変わりな問題が発生しています。

メニューはウィンドウの下部にあるツールバーにあり、クリックするとポップアップします (ただし、ホバーしたときはポップアップしません)。次に、次の場合に再び非表示にする必要があります: a) メニュー項目がクリックされたとき、b) それを開いたツールバー ボタンが再度クリックされたとき、c) または他の何かがクリックされたとき。

これは最初は完全に機能しているように見えましたが、悪化し始めています。今、私はグリッチの1つの一体が残っています...

何が起こるかは次のとおりです。

1. ページを読み込みます
2. 最初のメニュー ボタンをクリックします。必要に応じてメニューがポップアップします。
3. 2 番目のメニュー ボタンをクリックします。それがポップアップし、開いたままにしていた別のものがポップアップします。
4. 2 つ目を開いたままにして、最初のものをもう一度クリックします。ああ！2つ目は開いたままです！今では両方同時に開いています!??
5. ここで、ページ内の何かをクリックして、それらを非表示にします。最初のメニューだけ消えます！2番目のものはぶらぶらしています。IT をなくすには、そのメニュー ボタンをクリックする必要があります。

助けてください！！！ここに私のjsFiddleがあります:

http://jsfiddle.net/xn4TN/31/

ここに私のJavaScriptがあります:

    var togglemenu = null;
    function fn_togglemenu(datatarget) {
        $('.bottom-menu-bg ul li ul[data-target="' + datatarget + '"]').slideToggle(function() {
            togglemenu = $(this).is(':visible') ? datatarget : null;
            $('.bottom-menu-bg ul li ul[data-target="' + datatarget + '"]').parent('li a').toggleClass('hover');
        });
    }
    $(document).ready(function() {
        $('.bottom-menu-bg ul li a').click(function(ev){
            ev.preventDefault();
            fn_togglemenu($(this).attr('data-target'));
        });
        $(document).click(function(ev){
            if(togglemenu != null) {
                fn_togglemenu(togglemenu);
            }
        });
    });

現実的にインラインで含めるにはコードが多すぎます。