与jQuery / CSS在同一网页上设置的多个选项冲突

Question

所以我在一个用Jquery和CSS设置样式的网站上有一个选择菜单（Less 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') );