Question

在移动视图中，我想制作一个动画（从无显示过渡到显示块）以显示登录链接和创建新帐户等动画效果不错，但是我希望搜索栏保持其位置，我不知道为什么显示信息后它会移动

第二个问题是，当我将视图的大小调整为桌面视图时，我想用我尝试制作的幻灯片切换动画来隐藏信息：

@media only screen and (min-width: 700px){
  .resp-toggle1 {
  display: none;
  }
}

但不起作用，也不能与jquery一起使用：

 $(window).resize(function(){
        var winwidth = $(window).innerWidth();
        if(winwidth > 768){
           $('.resp-toggle1').toggleClass( 'disable' );
        }
    });

$(document).ready(function(){
        $('.menu-toggle').click(function(){
    $('.resp-toggle1').slideToggle( "0.01s" );
     });
    }); 

     $(window).resize(function(){
        var winwidth = $(window).innerWidth();
        if(winwidth > 768){
           $('.resp-toggle1').toggleClass( 'disable' );
        }
    });

@media only screen and (min-width: 700px){
  .resp-toggle1 {
  display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR" class="gr__localhost">
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body class="has-searchbox home" data-gr-c-s-loaded="true">
        <div id="header">
            <!-- header ad 728x60-->
            <div class="wrapper">
                <div id="logo">
                    <a href="">Website</a>
                    <span id="description"></span>
                </div>
                <div class="menu-toggle">
                    <i class="fa fa-bars fa-3x"></i>
                </div>
                <ul class="resp-toggle1" style="display: block;">
                    <li><a href="">Login</a></li>
                    <li><a href="">Create a new account</a></li>
                    <li class="publish"><a href="">Pub</a></li>
                </ul>
            </div>
            <form action="" method="get" class="search nocsrf">
                <input type="hidden" name="page" value="search">
                <div class="main-search">
            <div class="cell">
                <div class="has-placeholder input-text"><label>Search : </label><input type="text" name="sPattern" id="query" class="input-text" value=""></div>
            </div>
                    <div class="cell">
                        <div class="has-placeholder input-text"></div>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

感谢您的帮助

为什么搜索栏在幻灯片Toggle Animation的末尾移动？

0 个答案: