一次打开一个 div 并关闭所有其他在 VueJS 中打开的

Question

正在尝试实现 show/hide 描述框。

如果用户点击第一个 showDesc link，它会打开它的描述框。然后，如果用户单击第二个 showDesc link，它会打开它的描述框，并且应该关闭在 VueJs 中打开的所有其他框。

我尝试了如下所示。

下面是我的代码：

new Vue({
  el: "#app",
  data: {
    Show: false
  },
  methods: {
  showDesc: function() {
      this.Show = !this.Show;
   }
  }
})

.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;
}

a.mainSmooth.showDesc {
    color: dodgerblue;
    text-decoration: underline;
    cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<main id="app">
  <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 @click="showDesc" class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div :class="{ show: Show }" class="descContainer">
        <div>Description Text</div>
      </div>
    </article>
    <br/>
    <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 @click="showDesc" class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div :class="{ show: Show }" class="descContainer">
        <div>Description Text</div>
      </div>
    </article>
    <br/>
    <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 @click="showDesc" class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div :class="{ show: Show }" class="descContainer">
        <div>Description Text</div>
      </div>
    </article>
  </section>
</main>

Answer 1

这样怎么样：

new Vue({
  el: "#app",
  data: {
  },
  methods: {
  showDesc: function(e) { 
        let allA = document.querySelectorAll("a");
        for(let a of allA) {
         let descContainer = a.closest("article").querySelector("div.descContainer");
          descContainer.classList.remove('show');
          
         if(a === e.target) {
           descContainer.classList.add('show');
          } 
        }
   }
  }
})

.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;
}

a.mainSmooth.showDesc {
    color: dodgerblue;
    text-decoration: underline;
    cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<main id="app">
  <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 @click="showDesc" class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="descContainer">
        <div>Description Text 1</div>
      </div>
    </article>
    <br/>
    <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 @click="showDesc" class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="descContainer">
        <div>Description Text 2</div>
      </div>
    </article>
        <br/>
    <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 @click="showDesc" class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="descContainer">
        <div>Description Text 3</div>
      </div>
    </article>
  </section>
</main>

这是 fiddle。

这只是关于如何完成的原始想法。希望对你有帮助。

一次打开一个 div 并关闭所有其他在 VueJS 中打开的

Open one div at a time and close all others which are opened in VueJS

show-hide

vue.js