Question

在尝试保持网站响应时，我希望在屏幕低于特定大小时隐藏选择菜单中的文本。我使用类似的东西删除按钮文本。

function resizeBtn() {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if ($(window).width() <= 490) {
        $("#opt_user_btn.ui-btn-icon-left", activePage).toggleClass("ui-btn-icon-notext ui-btn-icon-left");
         $( "#storeselect", activePage ).selectmenu( "option", "iconpos", "notext" );
    } else {
        $("#opt_user_btn.ui-btn-icon-notext", activePage).toggleClass("ui-btn-icon-left ui-btn-icon-notext");
        $( "#storeselect", activePage ).selectmenu( "option", "iconpos", "notext" );      
    }
}

html与以下几行有关：

    <form><select name="storeselect" id="storeselect" data-native-menu="true" data-iconpos="left" onChange="this.form.submit();" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>

我看过JQM info但尚未弄明白。帮助将不胜感激。谢谢。：）

Answer 1

检查选择栏，所选选项的文本位于span标记中。一种解决方案是在span

中添加一个opacity:0的类

<div id="storeselect-button" class="ui-btn ui-icon-carat-d ui-btn-icon-left ui-corner-all ui-shadow"><span>Option 1</span><select name="storeselect" id="storeselect" data-native-menu="true" data-iconpos="left">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select></div>

<强>演示

http://jsfiddle.net/mjk0f0t7/

<强> Jquery的

    $(window).on('resize change', function () {
    if ($(window).width() <= 490) {
        $("#storeselect-button").find("span").addClass("noshow")
    } else {
        $("#storeselect-button").find("span").removeClass("noshow");
    }
});

<强>的CSS

.noshow {
    opacity:0;
}

隐藏或设置图标样式

$("#storeselect").append('<style>.ui-btn-icon-left:after{opacity:0}</style>');

<强>演示

http://jsfiddle.net/wuLccyda/

要添加ui-btn-icon-notext类，只需使用addClass并刷新选择菜单

 $(window).on('resize', function () {
    if ($(window).width() <= 490) {
     $("#storeselect").addClass("ui-btn-icon-notext")
         $('#storeselect').selectmenu('refresh', true);
            } else {
               $("#storeselect").removeClass("ui-btn-icon-notext")
               $('#storeselect').selectmenu('refresh', true);
            }
           });

<强>演示

http://jsfiddle.net/ywp70xtc/

JQM Change选择图标到Notext

1 个答案: