jquery - 与同一网页上由 jQuery/CSS 设置样式的多个选择冲突

Question

因此，我在网站上有一个选择菜单，该菜单使用 Jquery 和 CSS 设计(更少的 CSS，您可以在规则中看到一些 @ 变量)。我需要做的是在同一页面上添加另一个选择菜单。但是，当我尝试这样做时，其中一个框无法正常工作，这似乎是 javascript 冲突(毫无疑问是 id="dd"部分)这是我的代码，这一切都适用于一个选择框:

HTML

<div id="dd" class="offers-menu" tabindex="1">Offer Menu
<ul id="menu-offers-menu" class="dropdown"><li><a href="#DayTrips">Day Trips</a></li>
<li><a href="#Excursions">Excursions for several days</a></li>
<li><a href="#Wellness">Wellness and beauty treatment on the boat</a></li>
<li><a href="#Events">Events like Cooking lessons</a></li>
<li><a href="#Catering">Catering /Self Catering</a></li>
<li><a href="#WaterSports">Water Sports</a></li>
</ul> 
</div>

CSS

.offers-menu {
/* Size & position */
position: relative;
width: 230px;
z-index: 99;
/* Styles */
background: @mainBlue;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
color: #fff;
float: right;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 12px;
padding-right: 15px;
padding-bottom: 12px;
padding-left: 15px;
font-family: @mainFont;
}
.offers-menu:after { /* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;        
border-color: #4cbeff transparent;
}
.offers-menu .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;
/* Styles */
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}
.offers-menu .dropdown li {
padding: 0 10px;
}
.offers-menu .dropdown li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px 0;
transition: all 0.3s ease-out;
border-bottom: 1px solid #e6e8ea;
}
.offers-menu .dropdown li:last-of-type a {
border: none;
}
.offers-menu .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */

.offers-menu .dropdown li:hover a {
color: @mainBlue;
}
/* Active state */

.offers-menu.active {
border-radius: 5px 5px 0 0;
background: @mainBlue;
box-shadow: none;
border-bottom: none;
color: white;
}
.offers-menu.active:after {
border-color: #82d1ff transparent;
}
.offers-menu.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.2);
max-height: 400px;
}

JQUERY

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
}); 
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.offers-menu').removeClass('active');
});
});
</script>

这是我添加/修改的代码，以便在页面上获得额外的选择菜单，但它没有用!有人可以帮忙吗？

HTML

<div id="dd" class="mobile-menu" tabindex="1">Offer Menu
<ul id="menu-offers-menu" class="dropdown"><li><a href="#DayTrips">Day Trips</a></li>
<li><a href="#Excursions">Excursions for several days</a></li>
<li><a href="#Wellness">Wellness and beauty treatment on the boat</a></li>
<li><a href="#Events">Events like Cooking lessons</a></li>
<li><a href="#Catering">Catering /Self Catering</a></li>
<li><a href="#WaterSports">Water Sports</a></li>
</ul> 
</div>

CSS

.mobile-menu {
/* Size & position */
position: relative;
width: 230px;
z-index: 99;
/* Styles */
background: @mainBlue;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
color: #fff;
float: right;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 12px;
padding-right: 15px;
padding-bottom: 12px;
padding-left: 15px;
font-family: @mainFont;
}
.mobile-menu:after { /* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;        
border-color: #4cbeff transparent;
}
.mobile-menu .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;
/* Styles */
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}
.mobile-menu .dropdown li {
padding: 0 10px;
}
.mobile-menu .dropdown li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px 0;
transition: all 0.3s ease-out;
border-bottom: 1px solid #e6e8ea;
}
.mobile-menu .dropdown li:last-of-type a {
border: none;
}
.mobile-menu .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */

.mobile-menu .dropdown li:hover a {
color: @mainBlue;
}
/* Active state */

.mobile-menu.active {
border-radius: 5px 5px 0 0;
background: @mainBlue;
box-shadow: none;
border-bottom: none;
color: white;
}
.mobile-menu.active:after {
border-color: #82d1ff transparent;
}
.mobile-menu.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.2);
max-height: 400px;
}

JQUERY

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
}); 
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.offers-menu').removeClass('active');
$('.mobile-menu').removeClass('active');
});
});
</script>

Answer 1

您需要创建一个新的 DropDown 对象才能使用另一个选择菜单。

var dd2 = new DropDown( $('#dd') );