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

Question

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

HTML：

<div class="clicked"> 
    <p>Block 1</p> 
    </div> 
    <div class="content" style="display:block;"> 
    <p>1Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
     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.</p> 
    </div> 
    <div class="clickable"> 
    <p>Block 2</p> 
    </div> 
    <div class="content"> 
    <p>2Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
     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.</p> 
    </div> 
    <div class="clickable"> 
    <p>Block 3</p> 
    </div> 
    <div class="content"> 
    <p>3Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
     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.</p> 
    </div> 

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申报单显示被点击的一个前：

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

<a href="#" class="trigger" id="content-1">link1</a> 
<div class="show-content-1 hidden">Content 1</div> 

<a href="#" class="trigger" id="content-2">link2</a> 
<div class="show-content-2 hidden">Content 2</div> 

<a href="#" class="trigger" id="content-3">link3</a> 
<div class="show-content-3 hidden">Content 3</div> 
<!-- remove hidden class from any div to display it when page loads -->