javascript - 3 不同的 Main-Div，当点击另一个 main-div 时将显示在 main-div 内并关闭 main div

Question

您好，我是 jquery 和 javascript 的新手。我想做的是我有 3 个独立的 Main-Divs ex main-div1, main-div2, main-div-3 它们都是一个大盒子，当你点击 main-div1 时它会显示它的内容但是当当打开不同的主 div 时单击 main-div2 它将自动关闭并打开主 div。

HTML

<a href="link">
    <div class="main-div1" style="background-color:#000; color:#fff;">
        <div class="content"> Any contents </div>
    </div>
</a>
<a href="link">
    <div class="main-div2" style="background-color:#000; color:#fff;">
        <div class="content"> Any contents </div>
    </div>
</a>
<a href="link">
    <div class="main-div3" style="background-color:#000; color:#fff;">
        <div class="content"> Any contents </div>
    </div>
</a>

Answer 1

到目前为止，所有提供的答案都能完美地完成工作。

我已经做了一个几乎相同的例子，但不是简单地显示和隐藏 div，我添加了 jQuery 滑动动画。对于这些特殊情况，我个人非常喜欢这个动画，所以我想我应该把它放在那里。

我还用另一个 div 包装了内容。通过这种方式，您可以为 block 提供标题，这样您实际上就有了供用户点击的内容。

fiddle :https://jsfiddle.net/scrfbe95/

如果您点击一个已经打开的 div，它将简单地关闭该 div，否则该 div 将被打开而所有其他的将关闭。

HTML

<div id="main-div1" class="main-div">
  Main div 1
  <div class="content">
    <p>Content 1</p> 
  </div>
</div>
<div id="main-div2" class="main-div">
  Main div 2
  <div class="content">
    <p>Content 2</p> 
  </div>
</div>
<div id="main-div3" class="main-div">
  Main div 3
  <div class="content">
    <p>Content 3</p> 
  </div>
</div>

CSS

.main-div {
  padding: 10px;
  margin-top: 5px;
  background-color: #000;
  color: #fff;
}

.main-div > .content {
  display: none;
  color: #fff;
}

JS

(function($) {
  $(document).on('click','.main-div',function() { showMainDiv($(this)); });

  function showMainDiv($el) {
    var $elContent = $el.find('.content');
    if ($elContent.is(':visible')) {
      $elContent.stop(true,true).slideUp(500);
    }
    else {
      $('.main-div').find('.content').stop(true,true).not($elContent).slideUp(500);
      $elContent.slideDown(500);
    }
  }
})(jQuery);