jqueryのクリッカブル機能を追加

Question

私がクリックしたときに、それがに追加された要素が非表示になりますが、閲覧可能なままであることをいくつかのテキストを追加しようとし、それが再びクリックされたときに、要素を作るのですが再表示されます。

jQuery(document).ready(function($){ 
    $('<span class="click-me">Click Here For Filter Options</span>').insertBefore('.searchandfilter'); 

    $(".click-me").click(function() { 
     $(".searchandfilter").css("height", "0px"); 
    }); 
} 
}); 

私はトグル機能を使用するべきであることを知っていますが、私はそれを実装する方法について少し失われています。

ありがとうございます！

Answer 1

余分}は、コードを壊し、toggle()作られたショーを使用しての原因だったと取り組んで非表示にします。これは別の方法である

jQuery(document).ready(function($){ 
    $('<span class="click-me">Click Here For Filter Options</span>').insertBefore('.searchandfilter'); 

    $(".click-me").click(function() { 
     // Use toggle instead 
     //$(".searchandfilter").css("height", "0px"); 
     $(".searchandfilter").toggle(); 
    }); 
//} /* extra, cause of breaking */ 
}); 

：

jQuery(document).ready(function($){ 
    var $clickMe = $('<span/>',{ 
     class:'click-me', 
     text:'Click Here For Filter Options' 
    }); 

    $clickMe.insertBefore('.searchandfilter'); 

    $(".click-me").click(function() { 
     $(".searchandfilter").toggle(); 
    }); 

}); 

JsFiddle

Answer 2

あなたの例では、迷い}があります。これは恐らく動作しない理由です。

私はちょっと整理した実例があります。うまくここ

codepen

jQueryのtoggle作品。

$(function() { 
 
    $('<span>Show/Hide Filter Options</span>') 
 
     .insertBefore('.searchandfilter') 
 
     .click(function() { 
 
      $(".searchandfilter").toggle(); 
 
     }); 
 
});

<div class="searchandfilter">Some content</div>