HTML中列表收起与展开

Posted 2023-04-24

html中，点击列表元素，在其下展开更多的小选项。不点的时候是收起来的。
就是实现路由器左边的菜单那样的功能。怎么实现，知道的指点一下，谢谢了！！
我现在要设计一个有防火墙功能的路由器
分两部分:后台的CGI和前台的网页
CGI技术好说,比较单一,但是网页技术太过繁杂,看见别人的效果就是做不出来.除了HTML,CSS,javascript之外,还要用到什么技术呢?
登陆路由器的验证对话框是怎么实现的?
不懂的太多,谁给指点一下下.QQ:501273588

最常见的方法是通过Javascript控制某标签的CSS属性来实现的，下面是具体实现方法：

首先给要隐藏或显示的部分所在标签一个惟一的ID，比如将它们放到一个<div id="div1"></div>里;

然后给某个实体(按你的意思来，就是"列表元素")的onclick事件写一个响应的方法，方法中用上类似以下的语句：

document.all["div1"].style.display="block"; //显示
或
document.all["div1"].style.display="none"; //隐藏

其中"div1"就是要显示或隐藏的部分的ID。 参考技术A JAVASCRIPT+css 实现的
其实 原理和动态导航栏一样 参考技术B css的功能。你看一下css

Jetpack Compose 列表的展开与收起颜色动画效果

class ComposeActivity : AppCompatActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContent 
            PreviewConversation()
        
    


@Composable
fun Conversation(messages: List<Message>) 
    LazyColumn 
        items(messages)  message ->
            MessageCard(msg = message)
        
    


@Preview
@Composable
fun PreviewConversation() 
    ComposeTheme() 
        Conversation(messages = SampleData.conversationSample)
    



@Composable
fun MessageCard(msg: Message) 
    Row(modifier = Modifier.padding(all = 8.dp)) 
        Image(
            painter = painterResource(id = R.mipmap.ic_launcher1),
            contentDescription = "1234",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
        )
        Spacer(modifier = Modifier.width(8.dp))

        var isExpanded by remember  mutableStateOf(false) 

        val surfaceColor by animateColorAsState(targetValue = if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)

        Column(modifier = Modifier.clickable 
            isExpanded = !isExpanded
        ) 
            Text(
                msg.msg,
                color = MaterialTheme.colors.secondaryVariant,
                style = MaterialTheme.typography.subtitle2
            )
            Spacer(modifier = Modifier.height(4.dp))

            Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) 
                Text(
                    msg.author,
                    style = MaterialTheme.typography.body2,
                    color = surfaceColor,
                    modifier = Modifier
                        .animateContentSize()
                        .padding(all = 4.dp),
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1
                )
            


        
    



@Composable
fun HelloContent() 
    Column(modifier = Modifier.padding(16.dp)) 
        var name by remember 
            mutableStateOf("")
        

        Text(
            text = "Hello!",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.h5
        )
        OutlinedTextField(
            value = name,
            onValueChange =  name = it ,
            label =  Text("Name") 
        )
    


//
//@Preview(name = "Light Mode")
//@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, name = "Dark Mode")
@Composable
fun PreviewMessageCard() 
    ComposeTheme 
        MessageCard(Message("123", "aaaa"))
    

message

package com.anguomob.jecpack.bean

data class Message(val msg: String, val author: String) 

数据内容

package com.anguomob.jecpack.bean;

object SampleData 
    // Sample conversation data
    val conversationSample = listOf(
        Message(
            "Colleague",
            "Test...Test...Test..."
        ),
        Message(
            "Colleague",
            "List of Android versions:\\n" +
                    "Android KitKat (API 19)\\n" +
                    "Android Lollipop (API 21)\\n" +
                    "Android Marshmallow (API 23)\\n" +
                    "Android Nougat (API 24)\\n" +
                    "Android Oreo (API 26)\\n" +
                    "Android Pie (API 28)\\n" +
                    "Android 10 (API 29)\\n" +
                    "Android 11 (API 30)\\n" +
                    "Android 12 (API 31)\\n"
        ),
        Message(
            "Colleague",
            "I think Kotlin is my favorite programming language.\\n" +
                    "It's so much fun!"
        ),
        Message(
            "Colleague",
            "Searching for alternatives to XML layouts..."
        ),
        Message(
            "Colleague",
            "Hey, take a look at Jetpack Compose, it's great!\\n" +
                    "It's the Android's modern toolkit for building native UI." +
                    "It simplifies and accelerates UI development on Android." +
                    "Less code, powerful tools, and intuitive Kotlin APIs :)"
        ),
        Message(
            "Colleague",
            "It's available from API 21+ :)"
        ),
        Message(
            "Colleague",
            "Writing Kotlin for UI seems so natural, Compose where have you been all my life?"
        ),
        Message(
            "Colleague",
            "Android Studio next version's name is Arctic Fox"
        ),
        Message(
            "Colleague",
            "Android Studio Arctic Fox tooling for Compose is top notch ^_^"
        ),
        Message(
            "Colleague",
            "I didn't know you can now run the emulator directly from Android Studio"
        ),
        Message(
            "Colleague",
            "Compose Previews are great to check quickly how a composable layout looks like"
        ),
        Message(
            "Colleague",
            "Previews are also interactive after enabling the experimental setting"
        ),
        Message(
            "Colleague",
            "Have you tried writing build.gradle with KTS?"
        ),
    )

通过设置Text的maxLins来进行适配展开与折叠

 maxLines = if (isExpanded) Int.MAX_VALUE else 1

又通过 

animateColorAsState 对颜色进行渐变处理

        val surfaceColor by animateColorAsState(targetValue = if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)

最后只需要设置上去color 和maxLines就好了
 

            Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) 
                Text(
                    msg.author,
                    style = MaterialTheme.typography.body2,
                    color = surfaceColor,
                    modifier = Modifier
                        .animateContentSize()
                        .padding(all = 4.dp),
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1
                )
            

这里记得要价一个属性

.animateContentSize()

这样才会有动画的方式改变大小显示。