javascript - 如何在工具栏菜单中包含列表项？

Question

我在ios手机的gap上安装了工具栏。现在我想在“更多”工具栏下添加项目列表。如何在单击“更多”工具栏时包含列表。因此，在单击“更多”时，应该会弹出列表。

我的工具栏事件代码如下，

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 版本:- 这适用于手机

Example

Final version

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;
}