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() {

     });

  });

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

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');
 });

});

Answer 2

尝试如下：

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

       $( ".search-section" ).slideDown("500" , function() {
       $("#element_id").css("mask", "url(/wp-content/uploads/2018/07/close.svg) no-repeat 50% 50%");
     }); 

  });

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

2 个答案: