新手求救 js控制侧边栏的关闭和打开
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了新手求救 js控制侧边栏的关闭和打开相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#topwidth:100%;height: 50px;background-color: #827e7d;
#leftwidth: 15%;float: left;height: 500px;background-color: #ff0000;
#rightwidth: 85%;float: left;height: 500px;
</style>
</head>
<body>
<div id='top'>
<img src="#"/>
</div>
<div id='left'></div>
<div id='right'>
<iframe name="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="#"></iframe>
</div>
</body>
</html>
原代码太多只能弄个大概的。。希望实现当点击id=top div 里面的图片实现关闭和打开 id=left的div ，同时id=top div 里面的图片也会换一张
$(function()
$("#img1").click(function()
//关闭id=left的div
$("#left").hide();
//显示id=left的div
$("#left").show();
//换id=img1图片的内容
$("#img1").attr("src",imgPath); /*这里的imgPath是你所要更换图片的路径*/
);
本回答被提问者采纳
Vue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件（导航栏到侧边栏）
【中文标题】Vue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件（导航栏到侧边栏）【英文标题】：Vue.js - Open/close a dynamic Sidebar thought diferrent components (Navbar to Sidebar) using vuex 【发布时间】：2017-10-29 08:20:18 【问题描述】：我正在尝试在我的网站上制作动态侧边栏，但菜单按钮位于另一个组件（导航栏）中。如何让他们通过 vuex 相互通信？看，我知道如何在同一个组件中执行此操作，但我正在努力将这个布尔状态从导航栏传递到侧边栏。
【问题讨论】：
【参考方案1】：使用Vuex 的全部目的是在您的组件之间拥有一个共同的状态。您不必从一个组件进行通信，它们共享状态。
如果你在一个组件中提交了一个变更，设置一个变量：state.myVar，你可以在另一个组件中访问修改后的this.$store.state.myVar，这将始终反映修改后的值。
如果不能这样工作，请添加您的代码示例。
【讨论】：
【参考方案2】：如下定义您的商店： 从 'vue' 导入 Vue 从'vuex'导入Vuex
Vue.use(Vuex);
export const store = new Vuex.Store(
state:
sideBarOpen: false
,
getters:
g_sideBarOpen(state)
return state.sideBarOpen
,
mutations:
toggleSideBar(state)
state.sideBarOpen = !state.sideBarOpen;
,
);
在 NavBar 组件中单击菜单按钮的监听器
<template>
<button @click="toggleSideBar" class=myMenuBtn"></button>
</template>
<script>
export default
methods:
toggleSideBar()
this.$store.commit('toggleSideBar');
</script>
现在在您托管 SideBar 组件的主组件中
<template>
<side-bar v-show="showSideBar"></side-bar>
</template>
<script>
import SideBar from './SideBar'
export default
components:
'side-bar': SideBar
,
computed:
showSideBar()
this.$store.getters.g_sideBarOpen;
</script>
【讨论】：
以上是关于新手求救 js控制侧边栏的关闭和打开的主要内容，如果未能解决你的问题，请参考以下文章
把企业微信侧边栏的 JS-SDK 封装了，还加上了所有 TS 类型