Jquery slideToggle使用If/Else語句

Question

我的if/else語句不起作用。我需要做的是改變＃Scroller-Text的css（margin-top）。它必須在觸發$ nav.slideToggle的頭部被點擊時發生。這是一個響應式網站，所以我還需要確保我的代碼不會在平板電腦或桌面視圖中扭曲任何內容。

var screensize = document.documentElement.clientWidth; 

$(document).ready(function(){ 

    var $window = $(window), 
     $nav = $('.link'), 
     $button = $('header'); 

    $button.on('click', function(){ 
     $nav.slideToggle(400); 

     if($(this).is(':visible')) { 
      $('#Text-Scroller').css('margin-top', '60'); 
     } else { 
      $('Text-Scroller').css('margin-top', '102'); 
     } 
    }); 

    function adjustStyle(width) { 
     width = parseInt(width); 
     if (width > 600) { 
      $nav.show(); 
     } else { 
      $nav.hide(); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).width()); 
     $(window).resize(function() { 
      adjustStyle($(this).width()); 
     }); 
    }); 
}); 

HTML ，在跳出我

<nav> 
     <ul id="mobile_active"> 
      <li class="link"><a href="#">About Us</a></li> 
      <li class="link"><a href="#">Creative</a></li> 

      <li id="logo"><a href="#"><img src="links/Logo.png"/></a></li> 

      <li class="link"><a href="#">Portfolio</a></li> 
      <li class="link"><a href="#">Contact Us</a></li> 
     </ul> 
    </nav> 

    <header> 
     <a class="mobile_menu"></a> 
    </header> 
</div> 

<div class="line"></div> 

<div class="container"> 

<div id="G"> 
<img src="links/Image.png"/> 

<div id="Text-Scroller"> 
<h1>Headline</h1> 
<p>Body Copy</p> 
</div> 
</div> 
</div> 

Answer 1

你有...重大問題在這裏。我建議花更多時間瞭解響應式設計和JavaScript。你有一個文件準備功能的文件準備函數內部：

$(document).ready(function() 

相同

$(function() 

而你讓他們相互嵌套，這並不做任何事情。但是，你實際上並不需要任何代碼。你想要的功能，可以簡單地用下面的CSS補充說：

@media (max-width: 600px) { 
    .link { 
    display: none; 
    } 
} 

那隻剩下面的JavaScript：

$(document).ready(function(){ 

    var $nav = $('.link'), 
     $button = $('header'); 

    $button.on('click', function(){ 
     $nav.slideToggle(400); 

     if($(this).is(':visible')) { 
      $('#Text-Scroller').css('margin-top', '60'); 
     } else { 
      $('Text-Scroller').css('margin-top', '102'); 
     } 
    }); 
}); 

這裏有幾個問題。首先，'this'引用事件處理程序觸發的dom元素，在這種情況下爲$ button。 Button永遠不會被隱藏，所以你的if塊永遠不會是真的，好像你想檢查$ nav來獲取visiblity。 $ nav實際上是一個元素數組（所有的鏈接），所以你不能簡單地檢查數組的可見性，你需要檢查單個項目的可見性，所以你實際上需要$（$ nav [0]） 。是（ '：可見'）;

但是，即使這樣也行不通，因爲slideToggle是一個動畫，並且$ nav元素在動畫完成之前不會被隱藏，但是if塊會立即執行，因此實際上需要調用if在slideToggle完成後在回調中阻止邏輯。

然後你唯一剩下的問題是在else塊中你忘了'＃'，它需要是$（'＃Text-Scroller'），'60'和'102'不代表任何東西，這可能是他們，像素，百分比等等，我猜你想「60像素」和「102px」，最終給你：

$(document).ready(function(){ 

    var $nav = $('.link'), 
     $button = $('header'); 

    $button.click(function(){ 
     $nav.slideToggle(400, function() { 
      if($($nav[0]).is(':visible')) { 
       $('#Text-Scroller').css('margin-top', '60px'); 
      } else { 
       $('#Text-Scroller').css('margin-top', '102px'); 
      } 
     }); 
    }); 
}); 

但即使是現在我猜這億韓元」不會給你想要的東西，因爲菜單的高度降低了，一旦完成，立刻就會出現一個巨大的邊距。你可以在相反的方向上創建邊緣的動畫......但老實說，我認爲這更多的是設計不當的標誌。我認爲你應該轉向一個CSS動畫解決方案，併爲nav元素設置一個高度。我相信這會讓你得到你所需要的，並且會更簡單。這裏是一個的jsfiddle：JSFiddle with CSS animation

Answer 2

一件事是你的別人的前綴的選擇：

$('Text-Scroller').css('margin-top', '102'); 

應該

$('#Text-Scroller').css('margin-top', '102'); 

如果元素H爲Text-Scroller

編輯的ID：同樣的事情$button = $('header')

EDIT2：你打算檢查$button代替$('#Text-Scroller')的知名度？這是目前的檢查$button