Javascript 如何使用JQuery创建一个可选列表，其中列表项绑定到带有事件的按钮？
我遇到了JQuery的一个问题 我想创建一个列表，通过点击一组按钮中的一个按钮来选择项目。基本上，我有3个灰色背景的按钮，每个按钮都有自己的id=“”属性，还有一个由3个列表项组成的无序列表，初始显示设置为“无”（它们也有自己的id） 我的目标是实现这一结果： 1） 当我单击3个按钮中的一个时，我所单击的按钮将以绿色背景色激活（为此，我使用.toggleClass（）方法切换一个名为buttonListActive的类），相应的列表项将显示一个动画（为此，我使用.animate（）方法） 2） 如果我点击同一个按钮（现在处于活动状态），之前出现的列表项会随着动画再次消失，按钮再次变为灰色（表示不再处于活动状态） 3） 如果我在另一个按钮处于活动状态时单击某个按钮，则活动按钮的列表项将消失，并变为灰色（因此不再处于活动状态），我单击的新按钮将变为活动状态，其列表项将显示动画 4） 如果我在显示的列表项内部或ul元素内部（蓝色背景）单击，则不会发生任何事情 5） 如果我在ul元素（包含显示的列表项）外单击，列表项应消失，其活动按钮应再次变为灰色（不再活动） 如果我重复我自己的话，我很抱歉，但我希望尽可能清楚，以便让您理解这一需要 这是我的密码：Javascript 如何使用JQuery创建一个可选列表，其中列表项绑定到带有事件的按钮？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我遇到了JQuery的一个问题 我想创建一个列表，通过点击一组按钮中的一个按钮来选择项目。基本上，我有3个灰色背景的按钮，每个按钮都有自己的id=“”属性，还有一个由3个列表项组成的无序列表，初始显示设置为“无”（它们也有自己的id） 我的目标是实现这一结果： 1） 当我单击3个按钮中的一个时，我所单击的按钮将以绿色背景色激活（为此，我使用.toggleClass（）方法切换一个名为buttonListActive的类），相应的列表项将显示一个动画（为此，我使用.animate（）方法） 2）
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="utf-8"/>
<title>Lists</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// button1 -> item1
$(function() {
$("#button1").click(function(e){
e.stopPropagation();
if ($("#item1").css("display") == "block") {
$("#item1").animate({ width: "0" }, 300, function() {
$("#item1").css({ "display": "none"});
$("#button1").toggleClass("buttonListActive");
});
return;
}
$(this).toggleClass("buttonListActive");
$("#item1").css("display", "block");
$("#item1").animate({ width: "500px"}, 300 );
});
// button2 -> item2
$("#button2").click(function(e){
e.stopPropagation();
if ($("#item2").css("display") == "block") {
$("#item2").animate({ width: "0" }, 300, function() {
$("#item2").css({ "display": "none"});
$("#button2").toggleClass("buttonListActive");
});
return;
}
$(this).toggleClass("buttonListActive");
$("#item2").css("display", "block");
$("#item2").animate({ width: "500px"}, 300 );
});
// button3 -> item3
$("#button3").click(function(e){
e.stopPropagation();
if ($("#item3").css("display") == "block") {
$("#item3").animate({ width: "0" }, 300, function() {
$("#item3").css({ "display": "none"});
$("#button3").toggleClass("buttonListActive");
});
return;
}
$(this).toggleClass("buttonListActive");
$("#item3").css("display", "block");
$("#item3").animate({ width: "500px"}, 300 );
});
});
$(document).click(function(e){
console.log($(e.target));
if ($.contains(document.getElementById("ListID"), e.target) || $(e.target).is("#ListID")) { return; }
$("#item1").animate({ width: "0" }, 300, function() {
$("#item1").css({ "display": "none"});
$(".buttonListActive").toggleClass("buttonListActive");
});
$("#item2").animate({ width: "0" }, 300, function() {
$("#item2").css({ "display": "none"});
});
$("#item3").animate({ width: "0" }, 300, function() {
$("#item3").css({ "display": "none"});
});
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, sans-serif;
color:white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
button {
color:inherit;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
border: 1px solid black;
padding: 10px;
}
.buttonListActive {
background:#44D574;
}
ul li {
font-family:inherit;
display:none;
width:200px;
height:20px;
}
#ListID {
padding:10px;
background:#006ED6;
height:100px;
width:800px;
}
ul li.listItem {
background:#D61F2C;
margin-top:10px;
}
</style>
</head>
<body>
<div class="buttons">
<button id="button1" class="buttonList" name="button">Click to see list item1</button>
<button id="button2" class="buttonList" name="button">Click to see list item2</button>
<button id="button3" class="buttonList" name="button">Click to see list item3</button>
</div>
<ul id="ListID">
<li id="item1" class="listItem">This is some button1 text</li>
<li id="item2" class="listItem">This is some button2 text</li>
<li id="item3" class="listItem">This is some button3 text</li>
</ul>
</body>
</html>
列表
//按钮1->item1
$（函数（）{
$（“#按钮1”）。单击（功能（e）{
e、 停止传播（）；
if（$（“#item1”）.css（“显示”）=“块”）{
$（“#item1”）.animate（{width:“0”}，300，function（）{
$（“#item1”）.css（{“display”：“none”}）；
$（“#button1”）.toggleClass（“buttonListActive”）；
});
返回；
}
$（this.toggleClass（“buttonListActive”）；
$（“#item1”）.css（“显示”、“块”）；
$（“#item1”）.animate（{width:“500px”}，300）；
});
//按钮2->item2
$（“#按钮2”）。单击（功能（e）{
e、 停止传播（）；
if（$（“#item2”）.css（“显示”）=“块”）{
$（“#item2”）.animate（{width:“0”}，300，function（）{
$（“#item2”）.css（{“display”：“none”}）；
$（“#按钮2”）.toggleClass（“按钮列表”）；
});
返回；
}
$（this.toggleClass（“buttonListActive”）；
$（“#item2”）.css（“显示”、“块”）；
$（“#item2”）.animate（{width:“500px”}，300）；
});
//按钮3->item3
$（“#按钮3”）。单击（功能（e）{
e、 停止传播（）；
if（$（“#item3”）.css（“显示”）=“块”）{
$（“#item3”）.animate（{width:“0”}，300，function（）{
$（“#item3”）.css（{“display”：“none”}）；
$（“#按钮3”）.toggleClass（“按钮列表”）；
});
返回；
}
$（this.toggleClass（“buttonListActive”）；
$（“#item3”）.css（“显示”、“块”）；
$（“#item3”）.animate（{width:“500px”}，300）；
});
});
$（文档）。单击（函数（e）{
log（$（e.target））；
if（$.contains（document.getElementById（“ListID”），e.target）| |$（e.target）.is（“#ListID”））{return；}
$（“#item1”）.animate（{width:“0”}，300，function（）{
$（“#item1”）.css（{“display”：“none”}）；
$（“.buttonListActive”）.toggleClass（“buttonListActive”）；
});
$（“#item2”）.animate（{width:“0”}，300，function（）{
$（“#item2”）.css（{“display”：“none”}）；
});
$（“#item3”）.animate（{width:“0”}，300，function（）{
$（“#item3”）.css（{“display”：“none”}）；
});
});
身体{
字体系列：Verdana、Arial、无衬线字体；
颜色：白色；
文本阴影：1px 1px 2px rgba（0,0,0.4）；
}
钮扣{
颜色：继承；
文本阴影：1px 1px 2px rgba（0,0,0.4）；
边框：1px纯黑；
填充：10px；
}
.ButtonListative{
背景#44D574；
}
ulli{
字体家族：继承；
显示：无；
宽度：200px；
高度：20px；
}
#李斯蒂德{
填充：10px；
背景#006ED6；
高度：100px；
宽度：800px；
}
ul li.列表项{
背景#D61F2C；
边缘顶部：10px；
}
单击以查看列表项1
单击以查看列表项2
单击以查看列表项3
- 这是一些按钮文本
这是一些按钮文本
这是一些按钮3文本<div class="buttons">
<button id="button1" class="buttonList" name="button" data-target="item1">Click to see list item1</button>
<button id="button2" class="buttonList" name="button" data-target="item2">Click to see list item2</button>
<button id="button3" class="buttonList" name="button" data-target="item3">Click to see list item3</button>
</div>
<ul id="ListID">
<li id="item1" class="listItem">This is some button1 text</li>
<li id="item2" class="listItem">This is some button2 text</li>
<li id="item3" class="listItem">This is some button3 text</li>
</ul>
$(function () {
$('.buttonList').on('click', function(e){
e.stopPropagation();
var target = $('#' + $(this).data('target'));
if(target.css('display') == 'block') {
target.animate({
width: 0
}, 500, function(){
target.hide();
});
$(this).toggleClass('buttonListActive');
return;
} else {
$('.listItem').hide().width(0);
$('.buttonList').attr('class', 'buttonList');
}
$(this).toggleClass('buttonListActive');
target.show().animate({width: "500px"}, 500);
});
});