在同一個網頁上與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

你需要創建一個新的下拉目的是能夠用另一種選擇菜單。

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