隱藏的點擊，展示在另一個

這是我的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等），但令人驚訝的是他們都沒有工作。感謝您的幫助！

來源

2014-12-13 Frank

（） ...它顯然只會在第一次點擊時才起作用...您需要聽取點擊事件（使用on（）或click（））並切換類與toggleClass（） – henser 2014-12-13 16:20:16

可以使用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>

來源

2014-12-13 16:18:01 MH2K9

「慢」？這應該是一個班級？ – Frank 2014-12-13 16:20:15

「緩慢」是效果。您也可以放入「淡入淡出」，「幻燈片」或我最喜歡的「爆炸」。如果將其保留爲空，則不會對元素的顯示和隱藏產生影響，而只會出現或消失。 – Trucktech 2014-12-13 17:34:33

我認爲你可以利用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',''); 
           }); 

          });

如果你使用一個

來源

2014-12-13 16:37:06 M3ghana

隱藏的點擊，展示在另一個

回答

相關問題