Question

/ *我还在我的index.php文件中将我的元视口标记设置为设备宽度。

这是我的CSS：

if (inputFile.good())

我希望能够在移动视图中使搜索栏消失，以便用户可以单击搜索按钮并弹出div。如果有人建议使用JQuery使其更具动态性，那将是非常棒的。我希望它具有滑出效果。我没有使用JQuery的经验，但我有一些JavaScript经验。感谢您的时间和耐心。

Answer 1

您可以使用css media queries根据屏幕宽度显示/隐藏元素，而不是使用js：

HTML：

<input type="text" class="searchbar" value="Search" style="width:400px;"/>

CSS：

@media (max-width: 480px) {
    input.searchbar {
        display:none;
    }
}
@media (min-width: 481px) {
    input.searchbar {
        display:block;
    }
}

另外，你的html语法都搞砸了。我不确定您是否试图将<ul></ul>包裹在<h4></h4>下，反之亦然。为什么表单的每一行都是列表项？

Answer 2

对于搜索按钮，您可能正在寻找this之类的内容。这段代码是用Jquery编写的，所以请不要忘记在头标记的开头包含Jquery API：

然后，将以下Jquery添加到您的头部：

<script type="text/javascript">
$(document).ready(function() {
    $('#clickMe').click(function() {
        $('#test-div').show();
        $('#test-div').animate({ 'opacity': '+=1.0' },300);
    })
});
</script>

将以下html添加到您的页面：

<button id="clickMe">Please click me</button>
<div id="test-div">Hi!</div>

最后但并非最不重要的是，添加一些css来使div和按钮看起来很花哨：

#test-div {
    width:100px;
    height:100px;
    background:red;
    display:none; /* THIS IS NECESSARY */
    opacity:0.0; /* THIS IS ALSO NECESSART */
}

如何使导航栏元素出现或消失

2 个答案: