如何讓我的菜單一次只顯示一個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 -->