一次打开一个div并关闭所有打开jquery的其他div

Question

尝试实现显示/隐藏描述框。

如果用户点击第一个showDesc链接，则会打开它的描述框。 然后，如果用户单击第二个showDesc链接，则会打开它的描述框，并应关闭所有其他打开的链接。

下面的内容：

以下是我的代码：

＆＃13;

＆＃13;

$(".showDesc").click(function () {
    $(".descContainer").toggleClass("show");
});

＆＃13;

.descContainer {
    position: relative;
    padding: 24px 40px 24px 24px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: none;
    line-height: 24px;
    background-color: #fdfdfd;
}

.descContainer.show {
    position: relative;
    padding: 24px 40px 24px 24px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: block;
    line-height: 24px;
    background-color: #fdfdfd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">

<div class="feedContainer">

<div class="feedContent">

<h3>Title</h3>


<div class="feedButtonContainer">
</div>


<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>

</div>

</div>

<div class="descContainer">

<div>Description Text</div>

</div>

</article>

<article class="feedBox mainSmooth" style="display: block;">

<div class="feedContainer">

<div class="feedContent">

<h3>Title</h3>


<div class="feedButtonContainer">
</div>


<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>

</div>

</div>

<div class="descContainer">

<div>Description Text</div>

</div>

</article>

</section>

</main>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题是因为您一次更改了所有.showDesc元素的课程，而不仅仅是与点击的closest('.feedContainer)相关的课程。

要解决此问题，您需要使用DOM遍历来获取next()然后$(".showDesc").click(function() { var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show"); $(".descContainer").not($target).removeClass('show'); // hide other open elements });以获取要切换的元素，如下所示：

.descContainer {
  position: relative;
  padding: 24px 40px 24px 24px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  display: none;
  line-height: 24px;
  background-color: #fdfdfd;
}

.descContainer.show {
  position: relative;
  padding: 24px 40px 24px 24px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  display: block;
  line-height: 24px;
  background-color: #fdfdfd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <section>
    <article class="feedBox mainSmooth">
      <div class="feedContainer">
        <div class="feedContent">
          <h3>Title</h3>
          <div class="feedButtonContainer"></div>
          <ul class="list-inline feedExtras">
            <li class="">
              <a class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="descContainer">
        <div>Description Text</div>
      </div>
    </article>
    <article class="feedBox mainSmooth">
      <div class="feedContainer">
        <div class="feedContent">
          <h3>Title</h3>
          <div class="feedButtonContainer"></div>
          <ul class="list-inline feedExtras">
            <li class="">
              <a class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="descContainer">
        <div>Description Text</div>
      </div>
    </article>
  </section>
</main>

{{1}}

Answer 2

你不需要jQuery，你甚至不需要javascript。使用：target CSS伪类设置HTML +上的id和internals链接。

\s+(?!\s*[[:upper:]]{3}\y)

    .descContainer {
        position: relative;
        padding: 24px 40px 24px 24px;
        border-top: 1px solid rgba(0,0,0,.08);
        line-height: 24px;
        display:none;
    }

    .descContainer:target {
        display:block;
    }