Jquery 显示和隐藏而不是切换

Question

正如你所见，我是一名设计师而不是程序员，所以不要对我太严厉。 我有一个效果很好的切换开关，但我无法启动简单的显示和隐藏脚本。 我是一个比较宽松的人... 问题是，具有切换功能的 H4 可以独立工作。但我还需要通过按两个按钮来显示所有内容和隐藏所有内容。

切换效果

$(function() {
    $('.toggle-item').each(function(ix, el) {

        $(this).addClass('inactive');
        var contentDiv = $('.toggle-content', $(el));
        $(this).attr('data-height', contentDiv.outerHeight());
        contentDiv.css('overflow', 'hidden');
        contentDiv.height(0);
    });

    $(".toggle-item h4").click(function(){
        var $parent = $(this).parent('.toggle-item');
        if($parent.length) {
            if( $parent.hasClass('inactive') ) {
                $parent.removeClass('inactive');
                $('.toggle-content', $parent).height(           $parent.attr('data-height'));
            } else {
                $parent.addClass('inactive');
                $('.toggle-content', $parent).height( 0 );
            }
        }
    });
});

HTML 代码:

<div class="toggle-item">
    <h4>SOME TEXT AS HEADLINE</h4>
    <div class="toggle-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, turpis facilisis ultricies consequat, tellus ligula sagittis libero, porttitor venenatis urna dui non quam. Fusce aliquam, libero sed eleifend pellentesque, ligula dolor porta neque, et egestas diam mauris id odio.</p>
    </div>
</div>

按钮

<button id="show">Show All</button> 
<button id="hide">Hide All</button> 

意图

$(document).ready(function(){
  $("#show").click( function() {
       $('.toggle-content').show();
  });
  $("#hide").click(function(){
       $('.toggle-content').hide();
  });
});

Here您可以发现示例正在运行。

欢迎任何提示! TIA。

Answer 1

我认为您需要这个，只需尝试将您的脚本更新为如下所示:

  $("#show").click( function() {
       $('.toggle-content').each(function(){
         // you need this because height goes to 0pt
         $(this).height('auto');
         $(this).show();
       });
  });
  $("#hide").click(function(){
       $('.toggle-content').each(function(){
         $(this).hide();
       });
  });

我希望这会有所帮助