Question

早餐，以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";
        });
    });

});

});

Answer 1

检查this小提琴

我已将您的JS代码更改为

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

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

切换列表，h4标题更改为默认<li> </li>

1 个答案: