我有代码，点击时展开下拉菜单以显示一组链接。 有三种不同的下拉菜单，每种下拉菜单都有一组不同的链接，用于显示用户点击的时间。
脚本如下，但它不是动态的。 什么是更好，更有效的编写脚本的方法，所以当需要额外的下拉时，我不需要添加它？
$(".button-nav1").click(function() { $(".row1").toggle(); }); $(".button-nav2").click(function() { $(".row2").toggle(); }); $(".button-nav3").click(function() { $(".row3").toggle(); }); Joe ▼ - Overview
- Training
- Toomy
您可以将jquery减少为一个函数。 首先使用$("div[class^=button-nav]")查询来监听具有以button-nav开头的类的$("div[class^=button-nav]") 。 然后获取id并使用$("."+$(this).attr('id')).toggle();具有该id任何类$("."+$(this).attr('id')).toggle();
$("div[class^=button-nav]").on('click',function() { $("."+$(this).attr('id')).toggle(); });
Joe ▼
从我提供的代码中我假设.row1是一个错字。 我希望你的意思是#row1 。 如果是这样，代码将减少到
$('.button-nav1,.button-nav2,.button-nav3').click(function(){ $(this).toggle(); }
要将所有三个function合二为一，你可以为所有.button-nav1 ， .button-nav2和.button-nav3 （比如button-nav ）添加公共类， .button-nav2function更改为
$(document).on('click', '.button-nav', function(){ $(this).toggle(); }