Question

对不起，这是我的第一个网站。

我希望当＆＃34; .button＆＃34; div点击了＆＃34; .container＆＃34;中的所有div。 div淡出或隐藏然而它似乎并没有起作用。我更愿意将js保存在一个单独的文件中。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>MAIN</title>
    <link rel='stylesheet' type='text/css' href='style.css' />
    <script type='text/javascript' src='script.js'> </script>
</head>

<body>
    <div class="container">
        <div class="top">
            MENU
        </div>
        <div class="button">
            ^ ^ ^
        </div>
    </div>
</body>

CSS

.top {
    /* Border */
    border: 5px solid gray;
    width: 100px;
    background-color: black;
    /*Positioning*/
    margin-left: 25%;
    margin-right: 25%;
    top: 10px;
    left: 0px;
    position: absolute;
    /*Text*/
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    font-size: 20px;
    color: white;
}

.container {
    /*Border*/
    border: 10px solid gray;
    width: 200px;
    height: 200px;
    background-color: black;
    /*Positioning*/
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.button {
    /*Border*/
    border: 2px solid gray;
    background-color: black;
    width: 98%;
    /*Positioning*/
    margin-top: 90%;
    margin-left: auto;
    margin-right: auto;
    /*Text*/
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    color: white;
}

.button:hover {
    color: red;
    font-weight: bold;
}

JAVASCRIPT

$(document).ready(function() {
    $('.button').click(function() {
        $('.container').hide('fast');
    });
});

Answer 1

如果您希望隐藏容器中的所有div，可以使用：

$('.container>div').hide('fast');

因此，只有div是容器的直接子项才会被隐藏。在隐藏的div中隐藏div是没有用的：）

＆＃13;

$(document).ready(function() {
    $('.button').click(function() {
        $('.container>div').hide('fast');
    });
});

＆＃13;

.top {
    /* Border */
    border: 5px solid gray;
    width: 100px;
    background-color: black;
    /*Positioning*/
    margin-left: 25%;
    margin-right: 25%;
    top: 10px;
    left: 0px;
    position: absolute;
    /*Text*/
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    font-size: 20px;
    color: white;
}

.container {
    /*Border*/
    border: 10px solid gray;
    width: 200px;
    height: 200px;
    background-color: black;
    /*Positioning*/
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.button {
    /*Border*/
    border: 2px solid gray;
    background-color: black;
    width: 98%;
    /*Positioning*/
    margin-top: 90%;
    margin-left: auto;
    margin-right: auto;
    /*Text*/
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    color: white;
}

.button:hover {
    color: red;
    font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>MAIN</title>
    <link rel='stylesheet' type='text/css' href='style.css' />
    <script type='text/javascript' src='script.js'> </script>
</head>

<body>
    <div class="container">
        <div class="top">
            MENU
        </div>
        <div class="button">
            ^ ^ ^
        </div>
    </div>
</body>

＆＃13;

Answer 2

如果要隐藏src <- ' mat m1 = as<mat>(m); int numRows = m1.n_rows; mat x1 = as<mat>(x); vec anyEqual = zeros<vec>(x1.n_rows); for (int j = 0; j < x1.n_rows; j++){ for (int i = 0; i < numRows & !anyEqual(j); i++){ anyEqual(j) = (sum(m1.row(i) == x1.row(j)) == x1.n_cols); } } return(wrap(anyEqual)); ' div

上的所有div，则代码是正确的

但是您的问题是您没有将.container包含在您的网页中

将其包含在您的网页上，标记为Jquery或</body>

<head>

或者

<body>
    <div class="container">
        <div class="top">
            MENU
        </div>
        <div class="button">
            ^ ^ ^
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>

Answer 3

感谢大家的回复。我按照我的意图使它工作，我确保将来更具体。

我现在正在努力添加一个按钮，使这个重新出现（使用这些新知识应该很容易）。

再次感谢！

在div中隐藏多个div - JQuery

3 个答案: