Question

我有以下标记，我需要找到一种CSS方式来在.hide类处于活动状态时更改三角形。

为了达到这个目的，我使用了这样的伪元素：

summary:before  {
    content: '\25BC';
}
summary:before   + .hide  {
    content: '\25BA';
}

问题是：它不起作用。箭头不会改变。即使摘要：在+ .hide 之前出现在DevTools中。

那么如何在不使用JavaScript的情况下实现所需的效果呢？

var $div = $('summary');

$div.on('click', function() {
  $('ul').toggleClass('hide');
});

.wrapper {
  width: 300px;
  height: 300px;
  background-color: #ecf0f1;
}
.details {
  outline: none;
  background-color: #95a5a6;
  cursor: pointer;
  position: relative;
}
summary {
  outline: none;
  margin-left: 30px;
}
summary:before {
  content: '\25BA';
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 13px;
}
summary:before + ul.hide {
  content: '\25BC';
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 13px;
}
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="details">
    <summary>Sample</summary>
    <ul class="hide">
      <li>
        <input type="radio" checked/>
        <label>Label 1</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 2</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 3</label>
      </li>
    </ul>
  </div>
</div>

Answer 1

您无法在CSS中选择上一个元素。而是在div中添加一个类并切换它。

尝试以下解决方案。

＆＃13;

var $div = $('summary');

$div.on('click', function() {
  $('ul').toggleClass('hide');
  $(this).toggleClass('collapse');
});

＆＃13;

.wrapper {
  width: 300px;
  height: 300px;
  background-color: #ecf0f1;
}
.details {
  outline: none;
  background-color: #95a5a6;
  cursor: pointer;
  position: relative;
}
summary {
  outline: none;
  margin-left: 30px;
}
summary:before {
  content: '\25BA';
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 13px;
}
summary.collapse:before {
  content: '\25BC';
}
.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="details">
    <summary>Sample</summary>
    <ul class="hide">
      <li>
        <input type="radio" checked/>
        <label>Label 1</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 2</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 3</label>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

你在编写代码时犯了2个错误。

1st：您在两个地方复制了伪类的样式。

第二名：您已将'隐藏'类直接放入兄弟姐妹中。正确的做法是将它放在父母身上，这样你就可以访问它的所有孩子。

您切换了课程'hidden'，而它应该是'expand'，因为默认情况下，据我所知，您的菜单已关闭，当用户点击详细信息框时（'展开'））。希望有道理。

我为你做了两个代码。

首先，我们使用display:block和display:none扩展ul列表，然后按照jQuery中添加的类进行扩展。

<强> Example 1

在第二个中，我们仅使用jquery扩展ul列表以实现漂亮的幻灯片动画。我们也默认隐藏了ul。

<强> Example 2

CSS：之前和兄弟选择器不工作

2 个答案: