Question

我想更改＆＃39;标题内容＆＃39;当我点击标题。但我的代码不起作用。

这是我的html div ..

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

我的JQuery是..

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

    $header = $(this);

    $content = $header.next();

    $content.slideToggle(500, function () {

        $header.text(function () {

            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

请帮帮我

Answer 1

查看此演示

  $('.content').hide();
   $(".header").click(function () {

   $header = $(this);

   $content = $header.next();

   $content.slideToggle(500, function () {

    $header.text(function () {

        return $content.is(":visible") ? "Collapse" : "Expand";
    });
   });

});

<强> Fiddle

Answer 2

确保您已包含jQuery。包含jQuery后，你的代码完全正常：

工作代码段：

$(".header").click(function () {

    $header = $(this);

    $content = $header.next();

    $content.slideToggle(500, function () {

        $header.text(function () {

            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

Answer 3

我的代码有点改变

<div class="container">
<div class="header"><span>Collapse</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

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

$header = $(this);

$content = $header.next();

$content.slideToggle(500, function () {

    $header.text(function () {

        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});

}）;

您可以在Fiddle

中查看结果

我想使用Jquery更改标题内容

3 个答案: