我的jQuery和CSS點擊切換菜單很奇怪

我在jQuery中彈出菜單時出現各種奇怪和古怪的問題。我的jQuery和CSS點擊切換菜單很奇怪

該菜單應該位於窗口底部的工具欄上，並在點擊時彈出（但不能在徘徊時彈出）。它應該在下列情況下再次隱藏： a）單擊菜單項， b）打開它的工具欄按鈕再次單擊， c）或其他任何事情被點擊。

這似乎一開始工作完美，但它開始惡化。現在，我留下了一個小故障赫克...

這裏是發生了什麼：

我加載頁面
我單擊第一個菜單按鈕。它彈出菜單，因爲它應該。
我點擊第二個菜單按鈕。它彈出，我留下的另一個彈出。
離開第二個，我再次點擊第一個。 AARGH！第二個保持開放！現在他們都在同一時間開放！
現在我單擊頁面中的某些內容使其消失。只有第一個菜單消失！第二個掛在身邊。爲了讓IT消失，我必須點擊它的菜單按鈕。

請幫忙!!! 這裏是我的jsfiddle：

這裏是我的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); 
      } 
     }); 
    });

有太多的代碼，包括內嵌realisticly。

來源

2012-10-21 Forest

可以創建的jsfiddle？ –

請考慮縮進你的代碼（這樣，其他人可以讀*它，並看到結構）。 –

對於縮進 - 我正試圖進入這個網站（我不太瞭解！）這是縮進開始：P – Forest

切換不會隱藏其他菜單，所以更好地明確它。試試這個：

function fn_togglemenu(datatarget) { 
    // hide menus 
    $('.bottom-menu-bg ul li ul').hide(); 
    $('.bottom-menu-bg ul li').removeClass('hover'); 
    // show target menu 
    $('ul[data-target="' + datatarget + '"]').slideToggle(function() { 
     $('ul[data-target="' + datatarget + '"]') 
      .parent('li a').addClass('hover'); 
    }); 
} 

$(document).ready(function() { 
    $('.bottom-menu-bg ul li a').click(function(ev) { 
     ev.preventDefault(); 
     ev.stopPropagation(); 
     fn_togglemenu($(this).attr('data-target')); 
    }); 

    $(document).click(function(ev) { 
     // explicitly hide menus 
     $('.bottom-menu-bg ul li ul').hide(); 
    }); 
});

注：也停止鏈接clickhandlers傳播。

這裏是你更新的jsfiddle：http://jsfiddle.net/benedict_w/hzHKD/

來源

2012-10-21 08:58:39

仍然無法使用！我錯過了什麼嗎？對不起:) – Forest

對不起，有一個語法錯誤 - 我更新了代碼和鏈接：http://jsfiddle.net/benedict_w/hzHKD/ - 讓我知道它是否工作。 –

非常感謝！這解決了它！ – Forest

我的jQuery和CSS點擊切換菜單很奇怪

回答

相關問題