使用类更改第一个子元素的 CSS

change css of first child element with class

本文关键字：元素 CSS 第一个      更新时间：2023-09-26

我正在尝试编写javascript代码来更改用户单击元素后第一个div的css显示属性，该元素具有类toggle-placement。我的代码使用循环创建一个页面。循环每次都会生成这段代码：

<h3 class="placementName" onclick="showPlacement()" title="<?php echo $placement->getId() ?>"> Placement: <?php echo $placement->getName() ?></h3>
<div class="toggle-placement">

toggle-placement用display:none初始化的，我想在单击其上方的<h3>后显示每个div。如何在标题之后获取div 并更改其 CSS？感谢

如果要使用jQuery，@haim770，请提供最佳答案：

$('h3.placementName').click(
   function() { 
      $(this).next('.toggle-placement').show(); 
   }
)

但是使用css我认为这是不可能的。 你必须使用jquery来实现你要找的东西。

也许对你有帮助。

好吧，如果你执行以下操作会更容易：

在你的CSS中创建一个名为hide的类：

.hide{
  display:none;
}

然后在你的Javascript中执行以下操作：

$('.placementName').on('click', function() {
    $(this).next('.toggle-placement').toggleClass('hide'); 
});

你可以最简单的操作是jQuery：

$('.placementName').click( // when you click on a '.placementName' class element.
    function() {
        $(this).next('.toggle-placement').show(); // show() == display:block;
});

这里有 next(( 选择器的文档 => https://api.jquery.com/next/

只是一个编辑：

使用 jQuery：

$('.placementName').

比 快：

$('h3.placementName').

如果你只在

元素上使用类 "placementName"，你可以只使用 "$('.placementName'(。 性能测试 => http://jsperf.com/jquery-selector-test

相关文章：