JSFiddle

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

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

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

3 个答案:

JSFiddle