使用 jQuery 隐藏可见电话的引导 div？答案

【问题标题】：Use jQuery to hide bootstrap div that is visible-phone?使用 jQuery 隐藏可见电话的引导 div？
【发布时间】：2013-04-25 17:45:05
【问题描述】：

似乎在 bootstrap 中使用可见电话等响应式标签会禁用 jquery 的隐藏和显示功能。我正在尝试在准备好的文档上隐藏一个 div，该 div 只能在手机（可见手机）上看到。按下按钮时，将显示相同的 div，而另一个也是可见电话的 div 将被隐藏。

不幸的是，当存在可见电话类时，隐藏和显示什么都不做。如果我删除可见电话，jQuery 会正常工作。问题是，我不希望这些 div 不在手机大小的浏览器中显示。

这是我的脚本和 div：

<script type="text/javascript">
$(document).ready(function(){
    $('#phone-num').hide();
    $('#num').click(function() {
        $('#phone').hide();
        $('#phone-num').show();
    });
    $('#num-back').click(function() {
        $('#phone-num').hide();
        $('#phone').show();
    });
});
</script>

<div id="phone" class="visible-phone">
<button style="margin-left: 60%;" class="phone5" id="num">#</button>
</div>

<div id="phone-num" class="visible-phone">
<button style="margin-left: 80%;" class="phone5" id="num-back"><i class="icon-reply"></i></button>
</div>

【问题讨论】：

你为什么不直接使用媒体查询来获得手机大小的分辨率并将 div 设置为 display:none 而不是使用 jQuery 来做呢？
我不想以手机大小的分辨率自动隐藏和显示。我正在尝试提供有关按下按钮的替代信息。

标签： jquery twitter-bootstrap show-hide

【解决方案1】：

不透明度解决方法：

$('#phone-num').css('opacity', 0);

$('#num').click(function () {
    $('#phone').css('opacity', 0);
    $('#phone-num').css('opacity', 1);
});

$('#num-back').click(function () {
    $('#phone-num').css('opacity', 0);
    $('#phone').css('opacity', 1);
});

这是一个 jsFiddle，如果按钮没有出现，那么您可能需要将结果窗格缩小到媒体查询将其识别为电话分辨率。

jsFiddle：http://jsfiddle.net/cFd2n/4/

【讨论】：

【解决方案2】：

我通过将visible-phone 元素包装在另一个容器中解决了这个问题，然后可以将其隐藏，例如：

<div id="phone-num">
  <div class="visible-phone">
    <button style="margin-left: 80%;" class="phone5" id="num-back">
        <i class="icon-reply"></i>
    </button>
  </div>
</div>

现在这个东西只显示在手机上，当声明父元素不可见时，内部 div 也被隐藏了。

$('#phone-num').hide()

【讨论】：