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();
       });
  });

我觉得这会有所帮助

Answer 2

嗯，来自Tiendy.com的Manuel Cebrian先生来了诀窍：

$(document).ready(function(){

  $("#show").click( function() {
       $('.toggle-item').each(function(i) {             
            $(this).removeClass('inactive');
            $('.toggle-content', this).height( $(this).attr('data-height'));
       });
  });

  $("#hide").click(function(){
       $('.toggle-item').each(function(i) {
            $(this).addClass('inactive');
            $('.toggle-content', this).height( 0 );
       });
  });

});

这将打开和关闭所有，一些打开也将关闭。非常感谢Cebrian先生，并希望这能帮助更多人。谢谢大家。

Jquery show＆amp;隐藏而不是切换

2 个答案: