切换列表，h4标题被更改为默认<李>

Toggling list, h4 header getting changed to default <li>

本文关键字：默认 gt lt 列表 h4 标题      更新时间：2023-09-26

Breakfast，一开始是h4，最后是与li元素相同的样式，我只是想知道如何将其保持为h4。谢谢

HTML

<div class="recipe">
  <h4>Breakfast</h4>
</div>
<div class="content">
  <ul>
    <li>Banana Berry Crepes - 250 Cals</li>
    <li>Strawberry Parfaits - 170 Cals</li>
  </ul>
</div>

CSS

.recipe {
    cursor: pointer;
}
.content {
    display: none;
}
h4 {
    font-family: 'proxima_nova_alt_rgbold', sans-serif;
    font-size: 30px;
    margin: 40px 0 20px 0;
    border; solid 4px 
}

Javascript

$(document).ready(function(){
$(".recipe").click(function () {
    $recipe = $(this);
    $content = $recipe.next();
    $content.slideToggle(500, function () {
        $recipe.text(function () {
            return $content.is(":visible") ? "Breakfast" : "Breakfast";
        });
    });
});
});

检查这个小提琴

我已经更改了你的JS代码如下

$recipe.children('h4').text(function () {
        return $content.is(":visible") ? "Breakfast" : "Breakfast";
    });

希望这能回答您的问题：）

相关文章：