Question

需要修复，因为我已经尝试了一个月。你能看一下我的网站上看不起作用的按钮吗？

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

它出了什么问题？

Answer 1

你需要在你的按钮上附加一个事件，当我调试时，我没有点击任何东西。

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

Answer 2

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

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

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

单击隐藏和显示按钮

2 个答案: