如何在css中执行此操作

Question

我想通过点击css

来更改div框的显示属性

html代码

 <img id="modelsearchopen" src="<?php echo base_url('uploads/search.png')?>">
             <div  id="modelsearch">
                 <div class="col-md-12 ">
                 <div class="iconclose"> 
                         <span > SEARCH    </span> 
                         <span id="searchicon">&times;</span> 
                 </div>
                 </div>
                 <div class="col-md-12">
                     search form
                 </div>
            </div>

css代码

 #modelsearch {
    display: none;
    width:370px;  
    padding: 2px;
    position:absolute;
    right:0; 
    z-index:1;
    top: 1px; 
    overflow:hidden;
    background:#2874f0;
}
#modelsearchopen{
    margin-top: 8px; 
    margin-left: 11px;
    cursor: pointer;
} 
#modelsearch .iconclose{
   font-size:12px;  
   margin-top: 8px; 
   padding: 1px 10px 5px 10px;
  border-bottom: 1px solid #fff; 
  outline: none;
}
#searchicon{ 
    font-size:20px; 
    float:right;
    cursor: pointer;
}
#modelsearch span{
    color: #fff;
}

当我点击img modelsearch box show

时

这个js代码完美无缺

document.getElementById("modelsearchopen").onclick = function () {

        document.getElementById('modelsearch').style.display = 'block';
    }
    document.getElementById('searchicon').onclick = function ()
    {
        document.getElementById('modelsearch').style.display = 'none';
    }

当我改为css clickable方法然后模型不显示

我试过这个css方法但没有显示

 #modelsearchopen:focus + #modelsearch {
  display: block;
}

  #searchicon:focus + #modelsearch {
  display: none;
}

Answer 1

默认情况下，img元素无法聚焦，但您可以添加tabindex属性来模仿该行为。有了这个，你就可以点击它，你的CSS就可以了。

请注意，在图片外部点击会丢失“焦点”，因此行为将与JS的点击事件不同。为了避免这种情况，您可以添加更多CSS，以便在失去“焦点”后保持模态可见。

#modelsearchopen:focus+#modelsearch {
  display: block;
}

/* added this CSS */
#modelsearch:hover {
  display: block;
}




#modelsearch {
  display: none;
  width: 370px;
  padding: 2px;
  position: absolute;
  right: 0;
  z-index: 1;
  top: 1px;
  overflow: hidden;
  background: #2874f0;
}

#modelsearchopen {
  margin-top: 8px;
  margin-left: 11px;
  cursor: pointer;
}

#modelsearch .iconclose {
  font-size: 12px;
  margin-top: 8px;
  padding: 1px 10px 5px 10px;
  border-bottom: 1px solid #fff;
  outline: none;
}

#searchicon {
  font-size: 20px;
  float: right;
  cursor: pointer;
}

#modelsearch span {
  color: #fff;
}

<img id="modelsearchopen" src="https://lorempixel.com/150/150/" tabindex="0">
<div id="modelsearch">
  <div class="col-md-12 ">
    <div class="iconclose">
      <span> SEARCH    </span>
      <span id="searchicon">&times;</span>
    </div>
  </div>
  <div class="col-md-12">
    search form
  </div>
</div>

Answer 2

我是对的，你的意思是最后一个css可以取代js吗？

如果是这样，不，它不能。尽管:focus伪属性理论上可以应用于每个元素，但它只对类似输入的元素可靠。

这也意味着它一旦失去焦点就会关闭，这可以通过点击任意位置，按Tab键，可能按箭头键等来实现。所以这不可靠。

如何在css中执行此操作

好的css是无状态的，这意味着你不能在css中添加这样的逻辑。一般只使用js-code，实际上没有理由不这样做。

然而，理论上你可以用html复选框来做这件事，虽然这只是一个巨大的黑客。

#toggleCheckbox {
  display: none;
}

input.toggleClass[type="checkbox"]:checked + .toggleCard {
  display: none;
}

/* just for style */
.toggleCard {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<label for="toggleCheckbox">
  <img src="https://www.placecage.com/50/50" alt="Click me">
</label>

<input type="checkbox" id="toggleCheckbox" class="toggleClass">
<div class="toggleCard">
  This is a card, you can do anything in here
<div>

css onclick更改display：none to display：block property

2 个答案:

如何在css中执行此操作