Jquery show＆hide而不是toggle

就像你会看到我是一名设计师而不是程序员，所以不要对我强硬。我有一个切换工作得很好，但我不能启动一个简单的显示和隐藏脚本。我是一个宽松的人...... 事情是H4与切换功能独立运作良好。但我还需要显示所有内容并按两个按钮隐藏所有内容。Jquery show＆hide而不是toggle

肘节效果

$(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。

来源

2012-08-09 user1586214

你失去了我......我没有看到“The Intent”中的代码有什么问题。你试图做什么，这不是做什么？ – 2012-08-09 21:43:15

请创建一个http://jsFiddle.net或http://jsbin.com演示并描述一下更好什么是你的问题 – 2012-08-09 21:45:33

是的，我也失去了，因为这个工程在[JSFiddle]（http://jsfiddle.net/DfprZ /） – Brad 2012-08-09 21:45:44

好，VIA先生曼努埃尔Cebrian，从Tiendy.com自带的伎俩：

$(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先生，并希望这可以帮助更多人。谢谢大家。

来源

2012-08-11 12:18:26 user1586214

我认为你需要这个，只是尝试更新脚本如下：

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

我hoep这将有助于

来源

2012-08-10 09:39:31

Did not't help：|正如你所看到的那样......但没有工作。按照链接看到它。 ID的原件是#mostrar和#ocultar，我已更改，但没有运气。不管怎样，谢谢！ – user1586214 2012-08-10 19:49:04

Jquery show＆hide而不是toggle

回答

相关问题