使用 JavaScript 隐藏/显示 <div>答案

【问题标题】：Hiding/Showing <div> with JavaScript使用 JavaScript 隐藏/显示 <div>
【发布时间】：2014-12-19 00:15:00
【问题描述】：

我想了解为什么我的代码不起作用，以便更好地了解问题出在哪里。

这是我第一次尝试 JavaScript，我只是想在单击另一个 div 时显示/隐藏一些 div。具体来说，使用以下 JavaScript 代码，我想隐藏所有 div（如果 div 已经显示），然后显示我想显示的 div。

这些是文件：

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript First Try</title>
        <link rel="stylesheet" type="text/css" href="main.css"/>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script href="description.js"></script>
    </head>

    <body>

        <div class="articles">
            <div class="title"><h3>Mario regala collana a Sandrone</h3></div>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="title"><h3>Mario regala collana a Silvia.jpg</h3></div>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="title"><h3>Mario regala collana a Cazzo</h3></div>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

    </body>
</html>

main.css

body {
    font-family: Helvetica-light;
}

.title {
    height: 25px;
    border-bottom: 1px solid #a0a0a0;
}

.description {
    display: none;
}

description.js

/*global $, jQuery, alert*/

var main = function () {
    'use strict';
    $('.title').click(function () {
        $('.description').hide();

        $(this).children('.description').show();
    });
};

$(document).ready(main);

问题是当我点击我的 .title div 时，什么也没有发生，而且我不知道问题是出在我的 JavaScript 代码中还是还有其他我不知道的问题。

PS：我在我的 JavaScript 文件的顶部添加了“/global $, jQuery, alert/”，否则编译器会给我在定义之前使用“'$' . $('.title')click(function (){ " 错误，但我真的不知道它是否是正确的解决方案。

【问题讨论】：

非常感谢大家，非常感谢大家的帮助！

标签： javascript jquery html css

【解决方案1】：

您的描述 div 不是您的标题 div 的子级，因此它不起作用。我已经尽可能地修改了代码see here working

$('.title').click(function () {
    $('.description').hide();

   $(this).children('.description').show();
});

HTML：

        <div class="articles">
            <div class="title"><h3>Mario regala collana a Sandrone</h3> <!-- removed the closing </div> tag -->
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div></div> <!-- and added it here -->

            <div class="title"><h3>Mario regala collana a Silvia.jpg</h3>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div></div>

            <div class="title"><h3>Mario regala collana a Cazzo</h3>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
</div>

另外，这里有一个错误：

    <script href="description.js"></script>

这应该是

    <script src="description.js"></script>

【讨论】：

【解决方案2】：

主要问题是<script href="description.js"></script> 应该是<script src="description.js"></script> - src 而不是href。

另外你的.descriptions 不在你的.titles 里面，所以它不会找到相关的描述，它们都会被隐藏起来。

所以你需要获取 next 元素：

/*global $, jQuery, alert*/

var main = function () {
    'use strict';
    $('.title').click(function () {
        $('.description').hide();

        $(this).next().show();
    });
};

$(document).ready(main);

【讨论】：