3个不同的Main-Div，当点击另一个主div时将显示在main-div内并关闭主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 包装了内容。通过这种方式，您可以为块提供标题，这样您实际上就有了可供用户点击的内容。

小提琴：https://jsfiddle.net/scrfbe95/

如果你点击一个已经打开的 div，它只会关闭那个 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);

Answer 2

改变你的“main-div”类。或者，如果有 1 2 和 3，则使用 id。它们都是主要的 div，它们每个都应该做同样的事情。如果您希望 div 是特殊的，请使用 id。

<div class="main-div" style="background-color:#000; color:#fff;"> 
<p> Content 1 </p> 
</div>
<div class="main-div" style="background-color:#000; color:#fff;"> 
<p> Content 2 </p> 
</div>
<div class="main-div" style="background-color:#000; color:#fff;"> 
<p> Content 3 </p> 

</div>

jquery：

$(".main-div").click(function(){
    $(".main-div p").css("display","none");
    $(this).find("p").css("display","block")
});

CSS

.main-div p{
display: none;
}

.main-div{
height: 100px;
}

你必须给 main-div 至少一些高度才能看到它，因为现在没有别的东西了。

jquery 基本上隐藏了主 div 中的每个 p 元素，然后在当前单击的主 div 中显示 p 元素。

Answer 3

这称为可折叠元素！它很容易实现，因为你是从 javascript 开始的，我想你想用 jQuery。不要介意人们说 jQuery 很愚蠢，它非常适合这种情况。

<!-- html -->
<div class="collapsible-div main-div1">
  <p>content 1</p>
</div>

<div class="collapsible-div main-div2">
  <p>content 2</p>
</div>

<div class="collapsible-div main-div3">
  <p>content 3</p>
</div>

接下来，我们要使用 css 来处理其内部内容，如下所示：

/* css */
.collapsible-div p {
  display: none;
}
.collapsive-div.open p {
  display: block;
}

最后使用 jQuery，通过单击 div 元素本身并切换 open 类以切换 p 的显示模式来使此操作生效。还要从其中的每个可折叠 div 中删除开放类，以便在您打开另一个 div 时关闭其他类。

// javascript
$(".collapsible-div").click(function() {
  $(".collapsible-div").removeClass('open');
  $(this).toggleClass('open');
});

所以我们在这里所做的是使用 css 来控制具有“open”类的内容段落的可见性。并且使用 javascript (jQuery)，当我们单击它时，我们切换该类以切换 <p> 类“打开”！这是一个最小的工作示例，我建议将点击操作委托给 div 中的锚点，也许是为了制作一个图标来与最终用户交流这是一个可切换的面板。我希望这能帮到您！ （我还没有测试过，但我认为它应该可以工作。）

Answer 4

这是一个简单的例子。单击 div 后，它将关闭所有打开的 div 的内容并打开单击的 div 的内容。如果您有任何问题，请告诉我。

小提琴：https://jsfiddle.net/o5ppobae/

CSS 为我们的内容保存 div 提供了一些默认高度，因此即使内容被隐藏，它们仍然可以点击，每个下方都有一些空间，因此它们看起来不会相互碰撞并隐藏每个的初始内容。

HTML：

<div class="main main-div1" style="background-color:#000; color:#fff;"> 
<p> Content 1 </p> 
</div>
<div class="main main-div2" style="background-color:#000; color:#fff;"> 
<p> Content 2 </p> 
</div>
<div class="main main-div3" style="background-color:#000; color:#fff;"> 
<p> Content 3 </p> 
</div>

CSS：

.main {
    min-height: 10px;
    margin-bottom: 10px;
}

.main p {
    display: none;
}

JS：

$(document).ready(
    function () {
        // Attach div clicks
        $('.main').on('click',
            function () {
                // Find any open divs, remove open class and close content
                $('.main.open').removeClass('open').find('p').slideUp();

                // Add open class on new div and open content
                $(this).addClass('open').find('p').slideDown();
            }
        );
    }
);