Я хотел бы использовать пользовательский элемент управления с переключателем слайдов на одной странице несколько раз. Но все три не работают одинаково. Если я добавляю пользовательский элемент управления на страницу, все работает нормально, но если я вставлю два из них, они не будут работать правильно. Ниже мой код.
$(document).ready(function () {
$('#button').click(function (e) {
$('#list').slideToggle();
});
});
.button {
width: 200px;
background: #23997a;
height: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
color: white;
}
.list {
width: 200px;
background: #6bceb4;
display: none;
}
.buttonList {
border: none;
color: white;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.00);
outline: none;
}
#list ul {
margin: 0;
padding: 0;
line-height: 180%
}
.list ul li:hover {
background: #ff0000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button" class="button">
</div>
<div id="list" class="list">
<ul>
<li id="li1">
<input type="button" value="Coffee" class="buttonList" />
</li>
<li id="li2">
<input type="button" value="Milk" class="buttonList" />
</li>
<li id="li3">
<input type="button" value="Juice" class="buttonList" />
</li>
</ul>
</div>
Если я добавлю два или более элементов этого пользовательского элемента управления на страницу, он не будет работать должным образом. Что я должен сделать, чтобы это исправить?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Custom_Control_Asp.WebForm1" %>
<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
<uc1:WebUserControl1 runat="server" ID="WebUserControl2" />
</div>
</form>
</body>
</html>
Заранее спасибо!