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

向我跳出的一件事是你的其他人没有前缀的选择器：

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

应该是

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

如果元素的ID为Text-Scroller

编辑：与$button = $('header')

相同

Edit2：您是否打算检查$button而不是$('#Text-Scroller')的展示率？这是当前检查$button

Answer 2

你有......主要问题。我建议花一点时间学习响应式设计和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'没有任何意义，那可能是em，px，％等，我猜你想要'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

使用If / Else语句

2 个答案: