JQuery slideToggle с инструкцией If/Else

Question

Оператор if if else не работает. Мне нужно изменить css (margin-top) # Scroller-Text. Это должно произойти при щелчке заголовка, который запускает $ 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, из которого был вызван обработчик событий, в этом случае кнопка $. Кнопка никогда не скрыта, поэтому ваш блок if никогда не будет правдой, кажется, что вы хотите вместо этого проверить проверку $ nav for visiblity. $ nav фактически представляет собой массив элементов (все ссылки), поэтому вы не можете просто проверить видимость в массиве, вам нужно проверить видимость одного элемента, поэтому вам действительно нужно $ ($ nav [0]) .is (': видимый');

Но даже это не сработает, потому что slideToggle - это анимация, а элементы $ nav не будут скрыты до тех пор, пока эта анимация не завершится, но блок if будет выполнен немедленно, поэтому вам действительно нужно вызвать ваш if блокировать логику в обратном вызове после завершения функции slideToggle.

Тогда ваши оставшиеся проблемы состоят в том, что в блоке else вы забыли «#», он должен быть $ ('# Text-Scroller'), а это '60' и '102' ничего не значит , которые могли бы быть их, ПВ,%, и т.д., я предполагаю, что вы хотите «60px» и «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'); 

Если элемент час в качестве идентификатора Text-Scroller

Edit: То же самое с $button = $('header')

Edit2: Вы намерены проверить видимость $button вместо $('#Text-Scroller')? Текущая проверка $button