如何让我的菜单一次只显示一个div？

这工作正常，但是当显示一个div内容时，如果我单击以显示另一个div内容，它将覆盖第一个div。 我想一次只显示一个div。 谁能帮我？ 先感谢您。

HTML：

 
Block 1
 
 
 
1Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
 
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

 Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
 
 
 
Block 2
 
 
 
2Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
 
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

 Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
 
 
 
Block 3
 
 
 
3Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
 
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

 Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
  

JQuery的：

 $(window).load(function() { $('.clicked, .clickable').on('click', function(){ if ($(this).hasClass('clickable')){ $(this).next().show(); $(this).removeClass('clickable').addClass('clicked'); } else { $(this).next().hide(); $(this).removeClass('clicked').addClass('clickable'); } }); }); 

Answer 1

只需在点击之前隐藏所有.content div，然后再显示点击的那个：

 $(document).ready(function() { $('.clicked, .clickable').on('click', function(){ if ($(this).hasClass('clickable')){ $('.content').hide(); //Hide all content divs before showing the clicked one $(this).next().show(); $(this).removeClass('clickable').addClass('clicked'); } else { $(this).next().hide(); $(this).removeClass('clicked').addClass('clickable'); } }); }); 

的jsfiddle

Answer 2

这里有一个工作示例http://jsfiddle.net/9owL9u37/

CSS

 .content { display: none; } 

jQuery的

 $('.clickable').on('click', function () { $('.content').hide(); if ($(this).hasClass('clicked')) { $(this).removeClass('clicked'); } else { $(this).next().show(); $(this).addClass('clicked'); } }); 

Answer 3

这与我之前提交的问题非常相似。 也许这会有所帮助

http://codepen.io/mehmet/pen/BkJIu

jQuery的

 $('.trigger').on("click", function(e) { e.preventDefault(); var $this = $(this), $id = $this.attr('id'), $class = '.' + $('.show-' + $id).attr('class').replace('hidden', ''); $('div[class*=show]').not($class).fadeOut().promise().done( function(){ $('.show-' + $id).fadeIn(); }); }); 

CSS

 .hidden {display: none;} .trigger {display:block} 

HTML

 link1 
Content 1
 link2 
Content 2
 link3 
Content 3