我在菜单项中有一个箭头图标。当我点击这个项目时,一个小的附加菜单会下降。我需要找到一个解决方案,如何在我的下拉菜单出现的同时旋转我的图标。我的方法不起作用。
以下是我在Vue组件中的内容:
pg_dump -h <virtual-machine-ip> -U <username> -Fp postgres > dump.sql
sed 's/AS integer//' dump.sql > altered_dump.sql
psql -h <database-server-ip> -U <username> -d <new_database_name> -f altered_dump.sql
在我的脚本标签中:
<nav>
<section class="nav-item" @click="showDropdown = !showDropdown">
<div class="nav-icon">
<img src="../../../assets/img/users.svg" />
</div>
<h4>Users</h4>
<div class="arrow" :class="arrowLeft">
<img src="../../../assets/img/arrow_down.svg" />
</div>
<div v-if="showDropdown">
<span class="sub-nav-item">Import</span>
<span class="sub-nav-item">Invitations</span>
</div>
</section>
<section class="nav-item">
<div class="nav-icon">
<img src="../../../assets/img/polls.svg" />
</div>
<h4>Poll</h4>
</section>
</nav>
我的CSS:
<script>
export default {
data() {
return {
showDropdown: false,
};
},
computed: {
arrowLeft() {
let arrow = 'turn-arrow';
if (this.showDropdown === true) {
return arrow;
}
return true;
},
},
};
</script>
答案 0 :(得分:1)
有时,旋转不适用于内联元素。
尝试
.arrow {
display: inline-block; /* or block */
}