单击带有隐藏和显示的按钮

Question

需要解决这个问题，因为我已经尝试了一个月。您能否查看我的网站以查找不起作用的按钮？

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

这有什么问题？

Answer 1

尝试以下代码来展开或最小化容器。

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

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

Answer 2

您需要将一个事件附加到您的按钮，当我调试时，点击时我什么也得不到。

看看你的网站，我想你可能需要这样的东西： 您的 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>