如何让我的菜单一次只显示一个div？ [英] How to make my menu show only one div at a time?

问题描述

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

HTML：

 < div class = 点击 > 
< p>第1块< / p> 
< / div> 
< div class =contentstyle =display：block;> 
< p> 1Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。< / 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 format 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>第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> 
 
 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 format 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>第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> 
 
 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 format humanitatis per seacula quarta decima et quinta decima。 
 Eodem modo typi，qui nunc nobis videntur parum clari，fiant sollemnes in futurum。< / p> 
< / div> 
  

JQuery：

 < （'click'，.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'） ; 
} 
}）; 
}）; 
  

解决方案

只需隐藏所有。

  $（document）.ready 内容 div上点击之前显示点击（'（click）'）$ {$ b $（'。clicked，.clickable'）。on（'click'，function（）{
 if（$（this）.hasClass（'clickable'））{
 $（'。content'）。hide（）; //在显示点击之前隐藏所有内容div 
 $（this）.next（）。show（）; 
 $（this ）.removeClass（'clickable'）.addClass（'clicked'）; 
} else {
 $（this）.next（）。hide（）; 
 $（this）.removeClass （'clicked'）。addClass（'clickable'）; 
} 
}）; 
}）; 
  

JSFiddle

This works fine, but when one div content is shown, if I click to show another div content, it overrides the first div. I want to show only one div at a time. Can anyone help me? Thank you in advance.

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');
      }
    });
  });

解决方案

Just hide all the .content divs on click before showing the one that was clicked on:

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

这篇关于如何让我的菜单一次只显示一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！