javascript - 单击时，将搜索图标更改为关闭图标

Question

我在after类后设置了一个搜索图标:

a.mkhb-textbox-el__link:after {
    width: 23.2px;
    float: right;
    background-color: #38445d;
    content: '';
    -webkit-mask: url(/wp-content/uploads/2018/07/search.svg) no-repeat 50% 50%;
    mask: url(/wp-content/uploads/2018/07/search.svg) no-repeat 50% 50%;
    cursor: pointer;
    margin-right: 30px;
    vertical-align: -50px !important;
    height: 57px;
}

点击后会显示搜索输入部分:

$(document).on("click", ".mkhb-textbox-el__link", function() {

     $( ".search-section" ).slideDown("500" , function() {

     });

  });

在调用on click函数时，是否可以将search.svg更改为close.svg？

Answer 1

您可以使用单独的类控制 mask 属性，并在需要时删除/添加它:

a.mkhb-textbox-el__link:after {
  width: 23.2px;
  float: right;
  background-color: #38445d;
  content: '';
  -webkit-mask: url(/wp-content/uploads/2018/07/search.svg) no-repeat 50% 50%;
  mask: url(/wp-content/uploads/2018/07/search.svg) no-repeat 50% 50%;
  cursor: pointer;
  margin-right: 30px;
  vertical-align: -50px !important;
  height: 57px;
}

/* Notice mask url changes here */
a.mkhb-textbox-el__link.close:after {
  -webkit-mask: url(/wp-content/uploads/2018/07/close.svg) no-repeat 50% 50%;
  mask: url(/wp-content/uploads/2018/07/close.svg) no-repeat 50% 50%;
}

在 JS 中:

$(document).on("click", ".mkhb-textbox-el__link", function() {

 $( ".search-section" ).slideDown("500" , function() {
     $('a.mkhb-textbox-el__link').addClass('close');
 });

});