小编Lai*_*hid的帖子

我正在尝试学习 Vue.js 并进行基本的淡入淡出。我有一个始终保留在页面上的链接列表。单击链接时，我希望淡入和淡出div. 默认div情况下看不到。这div包含几个组件。我尝试遵循文档。然而，该元素仅在离开时淡出，但进入时没有任何反应。我删除了本文档的多余部分并保留了相关元素。

<template>\n   <div class="list">\n      <ul>\n         <li @click="openWindPoetry">\xe2\x98\x9e Wind Poetry</li> // button that toggles div show\n      </ul>\n   </div>\n   <div style="width: 97%;" class="project container">\n      <transition name="fade" mode="out-in">\n         <div v-if="showWP" class="backdrop" @scroll.passive="handleScroll"> // div needed to transition\n            <Header theme="WP" header="Wind Poetry" :types="[\'Interaction\',\'Data Visualisation\',\'2020\']"></Header>\n            <BodyText theme="WP" heading="ABOUT"\n               body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla magna, consectetur quis tellus eget, ultricies mattis nisi. Duis dictum dolor in ante placerat, non ultricies dui …

我已经创建了一个下拉联系菜单，其中包含 2 个链接。但似乎当我点击联系按钮然后点击所需的链接时，它只是关闭下拉菜单而不将用户重定向到任何地方。我在某处读到这是因为另一个鼠标按下事件会触发 :focus 基本上不聚焦？我怎样才能使这个菜单工作？我只知道一点点 javascript。

下面的 HTML -

<div class="contact">
            <button class="contactbtn">Contact</button>
            <ul>
               <li>
                  <p>For Any Enquiries?</p>
               </li>
               <li><a id="mail" href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
               <li>+44 7463 070158</li><br>
               <li><a id="ig" href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
            </ul>
         </div>

<div class="contact">
            <button class="contactbtn">Contact</button>
            <ul>
               <li>
                  <p>For Any Enquiries?</p>
               </li>
               <li><a id="mail" href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
               <li>+44 7463 070158</li><br>
               <li><a id="ig" href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
            </ul>
         </div>

    .contact {
       position: relative;
       top: 5vh;
       right: 0;
       font-family: Helvetica, sans-serif;
       height: 10vh;
       letter-spacing: 3px;
    
    }
    
    .contactbtn {
       color: black;
       text-transform: uppercase;
       font-size: 1.5rem;
       font-weight: bold;
       background: none;
       border: …