<div>使用Jquery进行单击展开

时间:2017-08-20 17:16:21

标签: jquery html css

我一直在网上冲浪,找到关于如何让div下降的答案,点击它。但我没有。顺便说一下,我没有代码。如果有人能给我一个解释,我将感激不尽。

2 个答案:

答案 0 :(得分:3)

你的问题不是很明显,但我会尽力回答。

通常在另一个div中插入div,并将该类或元素设置为隐藏在css中。然后,当用户单击div时,使用JS或Jquery更改css属性并将其设置为可见。

<html>
<head>
    <style>

    .hidden {
        visibility: hidden;
    }

    .show {
        visibility: visible;
    }

    .blue {
        background: blue;
        color:white;
        heigth:400px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256 hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>

<div id="parent" class="blue">
Click on the div
    <div id="content" class="hidden">
      .... Some content inside that is first hidden then showed when user 
      clicks
    </div>
<div>

<script>

$('#parent').on('click', function () {
    $(this).children(':first').toggleClass('show');

});

</script>

答案 1 :(得分:0)

如果我正确理解了一个问题,那么我会尽力帮助。

Css

$(document).ready(function() {
    $('#my_div').click(function() {
        $(this).css('height', '100px'); 
    });
});

的js

<div id="my_div">
    Lorem ipsum dolor sit amet...
</div>

HTML

year