Question

这是我的HTML：

 <span class="sb-icon-search">Suche
    <img src="img/close_search.png" width="20" height="20" id="close_search">
 </span>

CSS：

#close_search {
 position: absolute;
 top: 26%;
 right: 20%;
 opacity: 0.4;
 visibility:hidden;
 }

.sb-icon-search是可点击的。单击此按钮一次后，我需要显示#close_search。在另一次点击时，它应该再次消失......长话短说，我想在visibility

上的每次点击时更改图像的.sb-icon-search

我尝试了这个，但它只运行一次：

  jQuery(function($) { 
               $(".sb-icon-search").one('click', function(){
                   if (($(".sb-icon-search").length > 0)){ 
               $("#close_search").css('visibility','hidden');
               } else {
                 $("#close_search").css('visibility','visible'); 
               }
                                   });
                                 });

我已经尝试过其他一些函数（toggleClass等），但令人惊讶的是它们都没有工作。谢谢你的帮助！

Answer 1

可以使用toggle()

$('.sb-icon-search').click(function(){
     $(this).find('#close_search').toggle("slow");
});

#close_search {
    position: relative;
    top: 26px;
    right: 2px;
    opacity: 0.4;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="sb-icon-search">Suche
    <img src="img/close_search.png" width="20" height="20" id="close_search">
 </span>

Answer 2

我认为你可以使用jquery.data（）这是一个例子

jQuery(
function($) { 
               $(".sb-icon-search").click(function(){



            $(".sb-icon-search").data('clicked','once');

               if (($(".sb-icon-search").data('clicked'))   ==  "once" ){ 

                    $("#close_search").css('visibility','hidden');
                } else {

                    $("#close_search").css('visibility','visible'); 
                }
                $(".sb-icon-search").data('clicked','');
                               });

                             });

隐藏在一个单击，显示在另一个，

2 个答案: