Question

我搜索了一个搜索到这个问题的答案，但似乎无法找到适合我的答案。我想要的是一个图像，它在页面上显示为普通标记。我希望图像可以点击，当点击它时，一些内容将下拉到它下面以获得图像的描述等。然后，当再次点击图像时，它将隐藏内容。

我的（初学者）javascript尝试看起来像这样：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">

$(window).load(function(){
$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});

HTML就是这样：

    <div class="container">
<div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div>
<div class="content" style="display: none;">
    The words should be here.
</div>

任何帮助都将不胜感激，如果在其他地方得到解答我会道歉。我无法找到它。

Answer 1

您的代码需要单独的script标记。您无法重用导入jQuery的那个。

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
  // Your code
</script>

Answer 2

试试这个html：

 <div class="container">
    <div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div>
    <div class="content" style="height: 0px;overflow:hidden;">
        The words should be here.
    </div>

这个脚本：

$(document).ready(function(){
    $(".header").click(function () {

        if($(".content").height() === 0){
             $(".content").animate({height: "20px"}, 500);
        }else{
            $(".content").animate({height: "0px"}, 500);
        }

    });
})

关于jsfiddle：https://jsfiddle.net/wef1o0b5/

单击图像以显示内容

2 个答案: