javascript - Jquery & secton 没有隐藏我的标志 div id

Question

我试图只在一个 div 上隐藏我的 Logo 并在另一个上显示它。在我的一个部分中，我有一个视频，因此我不需要显示我的 Logo 。但是我根本做不到。它要么永远隐藏，要么根本不想隐藏。

我已经在 div 和 jquery 中尝试了 style=""。这些都不起作用。

我的 HTML 结构:

<!-- HEADER -->
<header id="header" class="header-left">        
    <div class="header-inner clearfix">

        <!-- LOGO -->
        <div id="logo" class="logo-left">
            <a href="index.html">
                     <img id="dark-logo" src="files/uploads/logo_dark.png" srcset="files/uploads/logo_dark.png 1x, files/uploads/logo_dark@2x.png 2x" alt="Logo Dark">
                     <img id="light-logo" src="files/uploads/logo_light.png" srcset="files/uploads/logo_light@2x.png 1x, files/uploads/logo_light@2x.png 2x" alt="Logo Light">
            </a>
        </div>

        <!-- MAIN NAVIGATION -->
        <div id="menu" class="clearfix">            

            <div class="menu-actions">
                <div class="menu-toggle"><span class="hamburger"></span></div>
            </div> <!-- END .menu-actions -->

            <div id="menu-inner">
                <nav id="main-nav">
                    <ul>
                        <li><a href="index.html">xxx</a>
                        </li>
                        <li><a href="#">xxx</a>
                        <ul class="sub-menu">
                        <li><a href="xxx.html">xxx</a></li>
                        <li><a href="xxx.html">xxxx</a></li>
                        <li><a href="xxx.html">xxx</a></li>
                        </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
     </div>
    <span class="pseudo-close header-close"></span>
</header>

好的，在我展示源代码之前，这里是有效的:

 <style>#logo img{opacity:0;visibility:hidden;}</style>

很标准吧？因此，我尝试以同样的方式将 Logo 隐藏到一个部分中，但没有成功。示例:

<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">

....

</section>

然后我尝试使用 jQuery 来隐藏 Logo 作为测试。 这根本行不通。示例:

<script src="files/js/jquery-1.12.4.min.js"></script>

<script>

$(document).ready(function(){


$("#logo").css({
display: "none",
visibility: "hidden"
});

$("#logo").hide();

</script>

我希望做的是将 Logo 隐藏在一个 div 中，然后在页面的其余部分显示它。我有一个想法用 jQuery 或一个部分来做到这一点。有人对如何执行此操作有任何想法吗？

Answer 1

style="#logo img{opacity:0;visibility:hidden;}"

这不是有效的 HTML style属性。它是 CSS 的选择器，应该嵌套在 HTML 的 <style> 下。标签。

设置元素的 style 时属性，你只需要写样式属性。它应该是这样的:

style="opacity:0;visibility:hidden;"

当您删除 logo 时，您隐藏 Logo 的 jQuery 尝试应该会起作用元素的 style标签。做$('#logo').hide();应该可以工作并且足够了。

一些注意事项:

1. 使用 opacity:0;与 visibility:hidden;没有意义。使用其中之一，都使元素不可见。
2. 你可以只写$('#logo').hide(); ，不需要整$("#logo").css({部分。
3. 你可以简写$(document).ready(function(){只是$(function() {
4. 记住使用 visibility:hidden;使元素在页面内联，但不可见。如果你想让它完全消失，使用display:none;