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

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

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