jQuery Simple Collapsible Div？ [英] jQuery Simple Collapsible Div?

问题描述

• 点击带类的元素应用于它。

DIV.CLASS - 展开和显示隐藏的内容。 （slideDown - Toggle）


• DIV.CLASS - 折叠并隐藏之前显示的内容。 （slideUp - Toggle）
  
  
  

  我在这里创建了一个jsFiddle： http://jsfiddle.net/Q4PUw/1/
  
  

  所以要模糊和简单，我需要知道如何在同一页面上的某个元素应用CLASS时，让DIV CLASS变为隐藏且可见，其中将激活和停用HIDDEN和/或可见HTML内容。我需要它隐藏在默认情况下。

  
  
  

  我看遍了整个互联网，只发现了非常复杂的脚本，但并不简单。我找到了简单的手风琴家......但那些从未关闭，他们只是打开另一个。

  
  
  

  谢谢大家的帮助，我希望我能够回答这个问题对于很多其他人来说......

  
  
  

  注意：我知道的只有很少的JavaScript和甚至jQuery。
  

  解决方案

    $（'。expand-one'）。click（function（）{
   $（'。content-one' ）.slideToggle（'slow'）; 
  }）; 
    

  演示： http://jsfiddle.net/Q4PUw/2/

  
  

  I am looking for the proper, simple, small code to do the following things:

  • Click on Element with Class Applied to it.

  • DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)

  • DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)

  I have created a jsFiddle here: http://jsfiddle.net/Q4PUw/1/

  So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.

  I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.

  Thank you all for the help and I hope that I may be able to answer this same question for plenty of other people...

  Note: I know very little JavaScript and or even jQuery.

  解决方案

  $('.expand-one').click(function(){
      $('.content-one').slideToggle('slow');
  });
  

  Demo: http://jsfiddle.net/Q4PUw/2/

  这篇关于jQuery Simple Collapsible Div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！