爲什麼我的下拉菜單第一次點擊後突然消失？

您可以看到我的現場演示here.我希望下拉菜單正確顯示。現在它第一次點擊時突然隱藏。我想讓下拉菜單在當前顯示的下拉菜單之外的任何地方點擊時消失。我該怎麼做？爲什麼我的下拉菜單第一次點擊後突然消失？

這是我的jQuery代碼

$(document).ready(function() { 
    $('#jsddm > li').click(function(e){ 
     e.preventDefault(); 
     $(this).find('ul').eq(0).css('visibility', 'visible').slideToggle(); 
    }); 
});

我注意到，如果.css('visibility', 'visible')被刪除，下拉菜單將不再工作。

來源

2012-12-19 Pakinai Kamolpus

因爲當你點擊「禮」元素上，點擊其他地方的文件中不會有任何影響你的函數只調用。您可以向隱藏菜單的整個主體添加點擊事件。要做到這一點，您還需要停止菜單中的點擊事件以冒泡到文檔，否則它會立即顯示然後隱藏。

嘗試這樣：

$(document).ready(function() { 

$('#jsddm > li').click(function(e){ 
     e.stopPropagation(); 
     e.preventDefault(); 
     $(this).find('ul').eq(0).slideToggle(); 
}); 

$(document).click(function (e) { 
    $('#jsddm > li').find('ul').eq(0).slideUp(); 
});

}）;

你也不需要使用可見性：隱藏，它只是讓你做更多的工作。這是我的CSS與上面的編輯代碼一起做編輯，似乎在一個本地副本我做奏效：

更換

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; visibility: hidden; width:220px; z-index:9999;}

隨着

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; display:none; width:220px; z-index:9999;}

來源

2012-12-19 03:09:21 lamflam

它不工作。你可以看看演示。 –

我剛纔意識到我刪除了e.preventDefault（），但是應該加回去。這可以防止標記實際上像鏈接一樣運行並重新加載頁面。我編輯了代碼，這是否有訣竅？ – lamflam

不，它還沒有工作。請幫忙。 –

也許你應該檢查它是否已經顯示或不先顯示，然後執行你的代碼。喜歡的東西：

$(document).ready(function() { 
    $('#jsddm > li').click(function (e) { 
     e.preventDefault(); 
     if ($(this).find('ul').eq(0).is(':visible')) { 
      $(this).find('ul').eq(0).slideUp(); 
     } else { 
      $(this).find('ul').eq(0).slideDown(); 
     } 
    }); 
});

來源

2012-12-19 02:49:26 PhearOfRayne

我已經改變了代碼，它不起作用。 –

嘗試設置「顯示」爲「無」的所有標籤在開始的時候。

$(document).ready(function() { 
    $('#jsddm > li > ul').css("display", "none"); 
    // ur code 
}

來源

2012-12-19 02:59:39 tom

它的作品！以及當我點擊頁面的任何區域時如何隱藏它？ –

@lamflam有最終的解決方案:) – tom

爲什麼我的下拉菜單第一次點擊後突然消失？

回答

相關問題