Question

注意：我尝试了所有问题＆amp;与此主题相关的答案。此外，我尝试了相关的问题，并尝试解决它，但没有成功。所以请死译我的问题。

我想

我runOnUiThread(new Runnable() { @Override public void run() { try { sticker_tab.addTab(sticker_tab.newTab().setIcon(d)); Constant.l("Tab Count===>" + String.valueOf(sticker_tab.getTabCount())); } catch (Exception e) { Constant.l(e.toString()); } } }); } runOnUiThread(new Runnable() { @Override public void run() { chat_sticker_adapter = new Chat_Sticker_Adapter(getSupportFragmentManager(), giftarray); sticker_pager.setAdapter(chat_sticker_adapter); sticker_tab.setupWithViewPager(sticker_pager); } }); combine this Div然后是第二click me Div显示。但我想在hiddendiv Div中再次点击，然后隐藏click me Div。 使用纯css的类似切换事件。
我hiddendiv Div然后是第二click me Div显示。但是我点击其他区域点击然后隐藏hiddendiv Div。因此，我不希望使用纯css在任何其他点击中隐藏hiddendiv Div。

注意： 只有纯CSS，CSS3在答案中使用不使用（ javascript，jquery ）＆amp;来自控制的任何其他

代码

＆＃13;

hiddendiv

＆＃13;

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}

＆＃13;

Answer 1

对于给定的要求，这是不可能的，所有元素都是div。

如果您将div更改为锚点a的链接，并使用:target伪

，则可以

通过在display: inline-block上设置a，您可以使用div

来调整大小

＆＃13;

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 150px;
}

＆＃13;

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>

＆＃13;

Answer 2

您可以使用checkbox输入，如果选中此项，则可以显示隐藏div。

下面是一个使用相同的例子。

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
  color:#FFF;
  display:block;
}

.hiddendiv {
  display: none;
  height: 200px;
  background-color: green;
}

.clicker:focus+.hiddendiv {
  display: block;
}
.hidden{
  margin-left:-99999px;
}
input#cmn-toggle-7:checked + label + div{
 display:block;
}

<div>
  <input id="cmn-toggle-7" class="hidden" type="checkbox" >
  <label for="cmn-toggle-7" class="clicker" tabindex="1">Click me</label>
  <div class="hiddendiv"></div>
</div>

Answer 3

你使用带有一些css操作的复选框来实现这一点

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

Here jsfiddle

如何仅使用css在Div中切换效果？

3 个答案: