Jquery隐藏多个div onclick

我正在制作一个健身应用程序，在每个练习页面上我都有一个显示“信息”，“数据输入”和“进展”的按钮。 这样工作正常，但是，当按钮单击顶部的divs层并且同时显示时。

我想要的是主要显示的信息，但是当用户点击其他按钮时，其他按钮div被隐藏。 因此，一次只显示一个div。

HTML

          
 
 
Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting yourself from the seat and bring the knees to your chest.
 
 
 
 Reps: Sets:   
 
 
    

脚本

 //JQUERY SHOW/HIDE HISTORY $(document).ready(function() { $('#showHistory').click(function() { $('.history').slideToggle("fast"); }); }); //JQUERY SHOW/HIDE DATA INPUT $(document).ready(function() { $('#showDataInput').click(function() { $('.dataInput').slideToggle("fast"); }); }); //JQUERY SHOW/HIDE INFO $(document).ready(function() { $('#showInfo').click(function() { $('.info').slideToggle("fast"); }); }); 

这是我的JSFiddle http://jsfiddle.net/GYru6/

先感谢您

我发现这个例子是我在http://jsfiddle.net/XwN2L/之后的事情，但是当我将代码实现到我的网站时，所有的div都会立即显示出来。

Answer 1

一些小调整

• 向所有按钮添加data-target=""
• 将类target添加到所有div

尝试

 
    
 
 
Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting yourself from the seat and bring the knees to your chest.
 
 
  Reps:  Sets:    
 
 
    

然后

 $(document).ready(function () { var $targets = $('.target'); $('#buttons .Smallbutton').click(function () { var $target = $($(this).data('target')).slideToggle(); $targets.not($target).hide() }); }); 

演示： 小提琴

Answer 2

尝试在点击function上添加.hide()其他div

  $(document).ready(function() { $('#showHistory').click(function() { $('.history').slideToggle("fast"); $('.dataInput').hide(); //hide other elements $('.info').hide(); //hide other elements }); }); 

小提琴

Answer 3

试试这个，

HTML，

 
          
 
 
Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting yourself from the seat and bring the knees to your chest.
 
 
 
 Reps: Sets:   
 
 
    

和Javascript，

 //JQUERY SHOW/HIDE HISTORY $(document).ready(function() { $('#showHistory').click(function() { $('.infoContainers').slideUp(); $('.history').slideToggle("fast"); }); }); //JQUERY SHOW/HIDE DATA INPUT $(document).ready(function() { $('#showDataInput').click(function() { $('.infoContainers').slideUp(); $('.dataInput').slideToggle("fast"); }); }); //JQUERY SHOW/HIDE INFO $(document).ready(function() { $('#showInfo').click(function() { $('.infoContainers').slideUp(); $('.info').slideToggle("fast"); }); }); 

DEMO

Answer 4

我会使用hideAll函数并在每个元素上调用它。 这将简化逻辑。

 function hideAll(){ $('.info, .dataInput, .history').slideUp(); } 

然后在每个点击事件中调用它

 $('#showInfo').click(function() { hideAll(); $('.info').slideToggle("fast"); }); 

http://jsfiddle.net/GYru6/1/