如何在工具欄菜單中包含列表項？

Question

我在ios手機上安裝了工具欄。 現在我想在“更多”工具欄下添加項目列表。 如何在單擊“更多”工具欄時包含列表。 所以單擊“更多”時，列表應該彈出。

我的工具欄事件代碼如下，

var tabBar = cordova.require("cordova/plugin/iOSTabBar");
tabBar.init();
tabBar.create({selectedImageTintColorRgba: "255,40,0,255"});
tabBar.createItem("More", "More", "tabButton:More", {
onSelect: function() {
     // Here I want to add the list
 }
});
tabBar.createItem("About us", "About us", "/www/pixeden-tab-bar-icons-ios-7/line__0000s_0126_info.png", {
onSelect: function() {
      aboutus();
  }
 })

 tabBar.show();
  tabBar.showItems("About us", "More");
  window.addEventListener("resize", function() { tabBar.resize() }, false);

我需要列出如下列表，

<ul>  
   <li class="newsfeed"><a href="#" title="Home">News Feed</a></li>  
   <li class="profile"><a href="#" title="Profile">Profile</a></li>  
   <li class="setting"><a href="#" title="Setting">Setting</a></li>  
   <li class="logout"><a href="#" title="Logout">Logout</a></li>  
   <li class="report"><a href="#" title="Report">Report Bug</a></li>  
</ul>

Answer 1

你可以這樣做：

JavaScript版本： - 這適用於手機

例

最終版本

HTML：

<ul>  
   <li class="newsfeed"><a href="#" title="Home">News Feed</a></li>  
   <li class="profile"><a href="#" title="Profile">Profile</a></li>  
   <li class="setting"><a href="#" title="Setting">Setting</a></li>  
   <li class="logout"><a href="#" title="Logout">Logout</a></li>  
   <li class="report"><a href="#" title="Report">Report Bug</a></li>
   <li class="about"><a href="#" title="About Us">About Us</a>
       <ul>
           <li><a href='#'>Something</a></li>
           <li><a href='#'>Something else</a></li>
       </ul>
    </li>  
</ul>

JavaScript的：

var about = document.getElementsByClassName("about")[0];

about.onclick = function()
{
    if (this.className == "about clicked")
    {
        this.className = "about";
    }else{
        this.className = "about clicked";
    }
}

CSS：

ul li{
    display:inline;
    position:relative;
}

ul li ul{
    position:absolute;
    display:none;
}


ul li.clicked ul {
    display:block;
    width:150px;
    left:-45px;
}

ul li.clicked ul li{
    display:block !important;
}