解决方案

Question

我正在尝试在JQuery Mobile 1.3中创建可折叠的底部菜单。我只想在底部有一个水平页脚，上面有一个向上箭头。单击页脚时，菜单会展开，箭头指向下方。这几乎就是我想要的：

但我似乎无法将按钮置于中心位置。

<div data-role="footer" data-theme="a" data-content-theme="a" data-inset="false"   data-type="horizontal"  data-iconpos="notext" data-position="fixed" class="foot">
<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button" >
<h3>Pets</h3>
<ul data-role="listview">
    <li><a href="#">Canary</a></li>
    <li><a href="#">Cat</a></li>
    <li><a href="#">Dog</a></li>
    <li><a href="#">Gerbil</a></li>
    <li><a href="#">Iguana</a></li>
    <li><a href="#">Mouse</a></li>
</ul>
</div>
</div>

的Javascript

.foot{
margin:0;
padding:0;
}
.ui-btn { width: 100%; height:30px;}
.center-button{
margin: 0 auto;
padding:0 20px 0 20px;
}

任何提示？

Answer 1

解决方案

这是一个有效的解决方案：http://jsfiddle.net/Gajotres/HHnzH/

#custom-collapsible h3 a span span.ui-icon {
    margin: 0 auto !important;
    margin-top: 2px !important;
    float: none !important;
}

HTML更改，由此：

<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button">

为：

<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button" id="custom-collapsible">

我希望这就是你想要的。

带有居中按钮的可折叠页脚菜单

2 个答案:

解决方案

更多信息