堆棧內存溢出
  簡體   English   中英

屏幕尺寸達到767px時，無法在html和js中添加顯示對象

[英]Having problems adding a display object in html and js, when screen-size gets to 767px

 原文  2016-11-18 02:38:48  7   3    javascript/ jquery/ html

問題描述

我將盡力盡可能明確地陳述我的問題。 我在將對象（在本例中為圖標）添加到屏幕的主導航時遇到問題，我希望在屏幕寬度減小到767px時顯示該對象。 主導航將消失，並由該對象代替。 我的問題是該圖標沒有顯示，但是主導航消失了，但是該圖標沒有出現。 我的導航和JavaScript代碼如下： 

body {font-size: 20px;}

.row {padding: 0 4%;}

.col {
    width: 100%;
    margin: 0 0 4% 0;
 }

.main-nav {display: none;}
.mobile-nav-icon{display: inline-block;} 

.main-nav {
    float: left;
    margin-top: 35px;
    margin-right: 25px;
}

.main-nav li{display: block;}

.main-nav li a:link,
.main-nav li a:visited{
    display: block;
    border: 0;
    padding: 10px 0;
    font-size: 100%;
}



<div class="bgimg-1">
<div class="row">
    <ul class="main-nav js--main-nav">
        <li><a href="index.html">Nothing</a></li>
        <li><a href="nothing.html">Nothing</a></li>
        <li><a href="nothing2.html">Nothing</a></li>
        <li><a id="final-option" href="nothing3.html">Nothing</a></li>
    </ul>
    <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>

使用Javascript： 

$('.js--nav-icon').click(function() {
    var nav = $('.js--main-nav');
    var icon = $('.js--nav-icon i');

    nav.slideToggle(200);

    if (icon.hasClass('ion-navicon-round')) {
        icon.addClass('ion-close-round');
        icon.removeClass('ion-navicon-round');
    } else {
        icon.addClass('ion-navicon-round');
        icon.removeClass('ion-close-round');
    }        
});

誰能說出任何可能的解決方案，為什么會這樣呢？ 我想告訴您，我沒有發現任何語法錯誤，並且Jquery已正確實現。 如果沒有，請檢查： 

<head>
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<link href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="navigation.js"></script>
</head>

我期待着聽到這個有用的社區的建議，並在此先感謝您。

3 個解決方案

解決方案1
 0  2016-11-18 02:54:45

您需要一些CSS媒體查詢，才能獲取“ .mobile-nav-icon”鏈接以根據屏幕寬度顯示或隱藏。 

.mobile-nav-icon {display:none} 

@media (max-width:767px) {
.mobile-nav-icon {display: inline-block;} 
}

如果將代碼放在代碼段中，調試起來會容易得多。

解決方案2
 0  2016-11-20 18:15:49

Here is all my code: 

    <html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
    <link href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="navigation.js"></script>

<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: 'Lato', 'Arial', 'sans-serif'; 
  font-size: 30px;
  color: #777;
}

.row{
    max-width: 1140px;
    min-width: 767px;
    margin: 0 auto;
}

.main-nav{
    float: right;
    list-style: none;
    margin-top: 55px;
    z-index: 9999;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
}

.main-nav li a:link,
.main-nav li a:visited{
    padding: 8px 0;
    color: #999;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 60%;
    border-bottom: 2px solid transparent;
    -webkit-transition: border-bottom 0.5s;
    transition: border-bottom 0.5s;
}

.main-nav li a:hover,
.main-nav li a:active{
    color: #666;
}

#final-option {
    padding-right: 25px;
}

.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    cursor: pointer;
    display: none;
}

.mobile-nav-icon i {
    font-size: 200%;
    color: #fff;
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: grayscale(25%);
  filter: grayscale(25%)
}

.bgimg-1 {
  background-image: url("plastic-trash.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("ocean.jpg");
  min-height: 42%;
}

.bgimg-3 {
  background-image: url("octupus.jpg");
  min-height: 42%;
}

.bgimg-4 {
    background-image: url("sperm-whale.jpg");
    min-height: 70%;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

                                            /* ------------Queries------------ */


/* Small phones to small tablets (481 to 767)*/
@media only screen and (max-width: 767px){
    body {font-size: 20px;}

    .row {padding: 0 4%;}

    .col {
        width: 100%;
        margin: 0 0 4% 0;
     }

    .main-nav {display: none;}
    .mobile-nav-icon{display: inline-block;} 

    .main-nav {
        float: left;
        margin-top: 35px;
        margin-right: 25px;
    }

    .main-nav li{display: block;}

    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }

}

</style>
</head>
<body>

<div class="bgimg-1">
    <div class="row">
        <ul class="main-nav js--main-nav">
            <li><a href="index.html">Nothing</a></li>
            <li><a href="nothing.html">Nothing</a></li>
            <li><a href="nothing2.html">Nothing</a></li>
            <li><a id="final-option" href="nothing3.html">Nothing</a></li>
        </ul>
        <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
    </div>
</div>

<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
  <h3 style="text-align:center;">Parallax Demo</h3>
  <p>Sample Text...</p>
</div>

<div class="bgimg-2">
  <div class="caption">
    <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">Caption</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
    <p>Sample Text...</p>
  </div>
</div>

<div class="bgimg-3">
  <div class="caption">
    <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
    <p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
  </div>
</div>

<div class="bgimg-4">
  <div class="caption">
    <span class="border">COOL!</span>
  </div>
</div>

</body>
</html>

這是js： 

$('.js--nav-icon').click(function() {
    var nav = $('.js--main-nav');
    var icon = $('.js--nav-icon i');

    nav.slideToggle(200);

    if (icon.hasClass('ion-navicon-round')) {
        icon.addClass('ion-close-round');
        icon.removeClass('ion-navicon-round');
    } else {
        icon.addClass('ion-navicon-round');
        icon.removeClass('ion-close-round');
    }        
});

解決方案3
 0  2016-11-21 13:58:29

好的，試試這個：

1）在您的標頭中使用https加載ionicons css： <link href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'

2）將填充和背景色添加到導航按鈕： 

.mobile-nav-icon {
float: right;
margin-top: 30px;
cursor: pointer;
display: none;
background-color: #000;
padding: 0 .25em;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JavaScript中屏幕分辨率小於767px時的addClass .js僅在分辨率&gt; 767px時有效 如果屏幕小於 767px (jQuery)，則隱藏特定的 HTML 元素 縮放時保留多邊形的屏幕尺寸 寬度大於767像素，啟用插件？ 使用v-onclick Vue 2.0隱藏父級。 最大寬度：767像素 抓住用戶的屏幕尺寸/瀏覽器分辨率 使用JavaScript確定屏幕尺寸的媒體查詢 根據屏幕大小（React）以不同的順序渲染組件 使用jQuery相對於用戶屏幕尺寸縮放圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM