如何讓下拉菜單點擊按鈕元素？

目前僅當我點擊img標籤時纔會出現下拉菜單。當我點擊按鈕標籤時如何顯示它？這裏是我的代碼：如何讓下拉菜單點擊按鈕元素？

<div class="btn btn-link dropdown account-menu-btn"> 
       <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false"> 
        <img src="~/Assets/profile_pic.jpg" class="img-circle"> 
       </a> 
       <ul class="dropdown-menu pull-right" role="menu"> 
        <li> 
         <a href="#"> 
          Create 
         </a> 
        </li> 
       </ul> 
      </div>

我使用數據目標修改了代碼，但我仍然需要點擊圖像上，而不是在按鈕展開下拉菜單。任何消化？

<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal"> 
       <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false"> 
        <img src="~/Assets/profile_pic.jpg" class="img-circle"> 
       </a> 
       <ul id="myModal" class="dropdown-menu pull-right" role="menu"> 
        <li> 
         <a href='@Url.Action("About", "Home")'> 
          Create 
         </a> 
        </li> 
       </ul> 
      </div>

來源

2016-03-11 v.g.

HTML並不好。你不應該有一個錨點等按鈕標籤內。容器應該不是按鈕而應該是DIV。 http://getbootstrap.com/components/#dropdowns –

因此，與div是一個最佳做法？我重播了它。但是現在如何打開菜單點擊'div'而不僅僅是img？ –

您可以將'data-target'屬性添加到您的定位標記，然後將ID添加到您想要單擊按鈕時展開的元素。 'data-target =「＃elementToExpand」' – Healforgreen

我相信答案是在twitter-bootstrap javascript section

明確指出你的代碼是不是從有什麼是真正的太遠

<div class="btn btn-link dropdown account-menu-btn"> 
    <a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
     <img src="~/Assets/profile_pic.jpg" class="img-circle"> 
     <span class="caret"></span> 
    </a> 

    <ul class="dropdown-menu pull-right" aria-labelledby="dLabel"> 
     <li> 
      <a href="#">Create</a> 
     </li> 
    </ul> 
</div>

希望這有助於

來源

2016-03-11 12:54:53 awoyotoyin

不，這沒有幫助。我仍然可以得到div上的「手形」鼠標指針，但是我可以擴展菜單，只點擊圖片 –

你可以也嘗試用Javascript和Jquery做到這一點。

$('#BUTTONID').click(function() { 
    $('#MENUID').toggle(); 
});

這是一個非常簡潔的版本，但它應該工作。

來源

2016-03-11 13:03:41

謝謝，但我想要做最佳實踐，而不是黑客:) –

基本上這是一個Javascript的好習慣。我不知道你是否有興趣學習它。如果你是應該在codecademy.com上檢查模塊'建立一個交互式網站'（它是免費的）） –

我熟悉JS，謝謝！ –

如何讓下拉菜單點擊按鈕元素？

回答

相關問題