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

Question

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

如果用户点击第一个showDesc链接，则会打开它的描述框。然后，如果用户单击第二个showDesc链接，它将打开它的描述框，并应关闭在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

以这种方式怎么样：

＆＃13;

＆＃13;

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');
          } 
        }
			}
  }
})

＆＃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;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这里是fiddle。

它只是一个关于如何做到的原始想法。我希望它有所帮助。