使用jQuery隱藏可見電話的bootstrap div？

似乎使用響應標籤，如可視電話與引導禁用隱藏和顯示jQuery的功能。我試圖隱藏一個文件準備好的div，只能在手機上看到（可見電話）。在一個按鈕按下，這個相同的div將被顯示，另一個div也是可見的，手機將被隱藏。使用jQuery隱藏可見電話的bootstrap div？

不幸的是，當一類可見電話出現時，隱藏和顯示不起作用。如果我刪除可見電話，那麼jQuery應該像它應該那樣工作。問題是，我不希望這些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>

來源

2013-04-25 therealbiglou

爲什麼你不只是使用手機大小的分辨率的媒體查詢，並將div設置爲display：none而不是使用jQuery來做到這一點？ – lifetimes 2013-04-25 17:48:10

我不想隱藏和自動顯示手機大小的分辨率。我試圖在按鈕按下時提供備用信息。 – therealbiglou 2013-04-25 18:02:50

透明度解決方法：

$('#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-25 18:15:01

我通過包裹另一個容器內的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-07 13:49:24 devsnd

使用jQuery隱藏可見電話的bootstrap div？

回答

相關問題