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

更改“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元素本身并切换open类来切换p的显示模式，使此操作起作用。同时从那里的每个可折叠div中删除open类，以便在打开另一个时关闭其他div。

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

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

Answer 3

这是一个简单的例子。单击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();
            }
        );
    }
);

Answer 4

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

我做了一个几乎完全相同的例子，但我没有简单地显示和隐藏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);

3个不同的Main-Div，当点击另一个主div时将显示在main-div和close主div内

4 个答案: