0

似乎使用带有引导程序的可见电话之类的响应式标签会禁用隐藏和显示的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>
4

2 回答 2

0

不透明度解决方法： 

$('#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/

于 2013-04-25T18:15:01.327 回答
0

我通过将元素包装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()
于 2013-08-07T13:49:24.267 回答