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

Question

嗨，我只是jquery和javascript中的新手。 我想做的是我有3个单独的Main-div，例如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

更改您的“ 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 2

这称为可折叠元素！ 它非常容易实现，因为您是从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元素本身并切换打开类以切换p的显示模式，使此操作有效。 同时从其中的每个可折叠div中删除打开类，以在打开另一个可折叠div时关闭其他类。

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

因此，我们在这里使用css通过类“ open”来控制内容段落的可见性。 并且使用javascript（jQuery），当我们单击该类时，可以切换该类以切换<p>类“打开”！ 这是一个最小的工作示例，我建议将div动作也委派给div中的锚点，也许要制作一个图标以告知最终用户这是一个可切换的面板。 我希望这能帮到您！ （我尚未测试过，但我认为它应该可以工作。）

Answer 3

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

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

CSS为我们的内容保存div提供了一些默认的高度，因此即使隐藏了内容，它们也仍然可以单击，每个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();
            }
        );
    }
);

Answer 4

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

我制作了一个几乎相同的示例，但是我添加了jQuery滑动动画，而不是简单地显示和隐藏div。 对于这些特殊情况，我个人非常喜欢此动画，所以我想只把它丢在那里。

我还用另一个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);