js 下拉框获取焦点后 ，自动展开选项内容？

JavaScript09

js 下拉框获取焦点后 ，自动展开选项内容？,第1张

楼上的17kxx_com，楼主用的是 textbox服务器端控件 -_-||,

有两种方法

1.js脚本方式

2.使用服务器端控件，也就是textbox控件的onchange事件，但是这个是会回发的.

这个需求最好使用纯前台脚本(html+javascript)实现，不建议使用asp.net 服务器端控件的服务端事件（因为会回发，也就是页面会刷新一次，比较难看）,下面是方法1的实现代码:

<asp:TextBox ID="txtA" onblur="changetText()" ....>

<asp:TextBox ID="txtB" ..........>

textbox对应会生成 相应的html代码.

然后javascript函数

<script>

function changetText()

{

document.getElementById("txtB").value=document.getElementById("txtA").value

}

</script>

不涉及后台代码。

以下为全部代码(通过测试)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >

<head runat="server">

<title></title>

<script>

function changetText() {

document.getElementById("txtB").value = document.getElementById("txtA").value

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox ID="txtA" runat="server" onblur="changetText()"></asp:TextBox>

<asp:TextBox ID="txtB" runat="server"></asp:TextBox>

</div>

</form>

</body>

</html>

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。

解决方案

1.实现一个按钮，

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：