javascript - 非表示と表示でボタンをクリック

Question

私は一ヶ月試してきたので、これを修正する必要があります。私のウェブサイトで機能しないボタンを確認できますか?

http://www.insightenergy.eu/about-us.php

それの何が問題なのですか？

Answer 1

コンテナーを展開または最小化するには、次のコードを試してください。

$('.expander').click(function(){

     if(condition){
        $('.expander').next().show();
     }
     else{
        $('.expander').next().hide();
     }});

Answer 2

ボタンにイベントを添付する必要があります。デバッグすると、クリックしても何も得られません。

あなたの Web を見ると、おそらく次のようなものが必要だと思います: あなたの HTML 構造は次のようなものです:

HTML

<ul class="blog-post-full-list">
    <li >
        <div >0</div>
        <div class="expandible">Content</div>
    </li>
    <li >
        <div >1</div>
        <div class="expandible">Content</div>
    </li>
    <li >
        <div >2</div>
        <div class="expandible">Content</div>
    </li>
    <li >
        <div >3</div>
        <div class="expandible">Content</div>
    </li>
</ul>

したがって、コードで JQuery 関数のトグルを使用できます。

JS

$(".blog-post-full-list>li").on('click',function(){
    /*
     *The object this is the li you've clicked on
     *The jQuery function toggle swiches the display ON OFF
     *The number 300 means the duration of the animation. If you don't 
     *    want to animate it just remove the parametter 
     */
    $(this).find(".expandible").toggle(300);
})

http://jsfiddle.net/vzkUL/2/

次のように、JS ファイルに追加するか、コードにインラインで追加できます。

<script>

//JQuery onReady
$(function(){

  $(".blog-post-full-list>li").on('click',function(){
    //The object this is the li you've clicked on
    //The jQuery function toggle swiches the display ON OFF
    //The number 300 means the duration of the animation. If you don't want to animate it just remove the parametter
    $(this).find(".expandible").toggle(300);
  })

});
</script>