Question

我在JQuery Mobile的标题上有按钮。我想隐藏标题（h1）只有当锚点显示在标题元素上时，要么是低分辨率，要么是从横向到纵向改变视图。

HTML

<div class="header ui-bar-c" id="head1" data-role='header'>
    <div id="gentags" class="ui-btn-left">
        <a id="htmltag" data-role="button" data-inline="true" data-mini="true">&lt;&gt;&lt;/&gt;</a>
        <a id="csstag1" data-role="button" data-inline="true" data-mini="true">{}</a>
        <a id="colon" data-role="button" data-inline="true" data-mini="true">:</a>
        <a id="semicolon" data-role="button" data-inline="true" data-mini="true">;</a>
        <a id="csstag2" data-role="button" data-inline="true" data-mini="true">:;</a>
        <a id="jstag1" data-role="button" data-inline="true" data-mini="true">()</a>
        <a id="jstag2" data-role="button" data-inline="true" data-mini="true">("")</a>
        <a id="function" data-role="button" data-inline="true" data-mini="true">function(){}</a>
    </div>

    <h1>Text Website Name</h1>
    <a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true" class="ui-btn-right">Bars</a>
</div>

Answer 1

以下脚本可以为您提供指导：

jQuery(function($) {
   $(window).bind('resize', function() {
      var $btns = $('#headbtns'),
      btnsWidth = $btns.width(),
      width     = $(window).width();
      if ((btnsWidth / width) > 0.3)
         $('.ui-title').hide();
   else
         $('.ui-title').show();
   });
});

这里我们检测按钮容器的宽度是否大于视口宽度的30％。默认情况下，jQuery mobile中的标头在x轴上具有30％的边距。

尽管如此，它可以解释它，但是检测按钮容器与标题中文本的冲突并不准确。要做到这一点，它需要一些肮脏的技巧......

文件宽度如果A超过B则B被隐藏

1 个答案: