下拉菜单不在子页面上工作?但它在主页上运行良好。
这是我的HTML代码:
<div class="helpline-cont">
<div id="dd" class="wrapper-dropdown-client" tabindex="1">
<span><img src="images/tms-icon1.png" alt="Client Login">Client Login</span>
<ul class="dropdown">
<li><a href="travel-management-system.html" title="Main Login" target="_blank">Main Login</a></li>
<li><a href="../client/login.html" title="Lite Login" target="_blank">Lite Login</a></li>
</ul>
</div>
</div>
<div class="helpline-cont" style="margin:0;">
<div class="wrapper-dropdown-3" tabindex="2">
<span><img src="images/helpline-icon.png" alt="Ezeerooms Helpline">Support</span>
<ul class="dropdown">
<li><a href="#">USA: 1 800 594 7894</a></li>
<li><a href="#">Others: +91 33 40715560</a></li>
</ul>
</div>
</div>
jQuery代码:
<script>
$(function () {
$('#dd').on('click', function(event){
event.stopPropagation();
$('.wrapper-dropdown-client').toggleClass('active');
});
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-client').removeClass('active');
});
});
</script>
这是CSS:
.wrapper-dropdown-client {
position:relative;
width:127px;
height:33px;
margin:0 auto;
padding:0 15px;
background:#579b0f;
cursor:pointer;
outline:0;
font-weight:400;
color:#d1d3d4
}
.wrapper-dropdown-client:after {
position:absolute;
right:15px;
top:51%;
margin-top:-3px;
border-width:5px 5px 0;
border-style:solid;
border-color:#d1d3d4 transparent
}
.wrapper-dropdown-client .dropdown {
position:absolute;
width:190px;
top:100%;
left:0;
right:0;
background:#579b0f;
color:#ececec;
font-weight:400;
-webkit-transition:all .5s ease-in;
-moz-transition:all .5s ease-in;
-ms-transition:all .5s ease-in;
-o-transition:all .5s ease-in;
transition:all .5s ease-in;
list-style:none;
opacity:0;
pointer-events:none
}
.wrapper-dropdown-client .dropdown li a{
display:block;
padding:5px 10px;
text-decoration:none;
color:#ececec;
border-bottom:1px solid #478505;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out
}
.wrapper-dropdown-client .dropdown li i {
float:right;
color:inherit
}
.wrapper-dropdown-client .dropdown li:last-of-type a {
border:none
}
.wrapper-dropdown-client .dropdown li:hover a {
background:#71b925;
color:#ececec
}
.wrapper-dropdown-client.active .dropdown {
opacity:1;
pointer-events:auto
}
.no-opacity .wrapper-dropdown-client .dropdown,
.no-pointerevents .wrapper-dropdown-client .dropdown {
display:none;
opacity:1;
pointer-events:auto
}
.no-opacity .wrapper-dropdown-client.active .dropdown,
.no-pointerevents .wrapper-dropdown-client.active .dropdown {
display:block
}
.wrapper-dropdown-client:focus .dropdown {
opacity:1;
pointer-events:auto
}
.wrapper-dropdown-3 {
position:relative;
width:100px;
margin:0 auto;
padding:0 15px;
background:#0b4691;
cursor:pointer;
outline:0;
font-weight:400;
color:#d1d3d4
}
.wrapper-dropdown-3:after {
position:absolute;
right:15px;
top:51%;
margin-top:-3px;
border-width:5px 5px 0;
border-style:solid;
border-color:#d1d3d4 transparent
}
.wrapper-dropdown-3 .dropdown {
position:absolute;
width:190px;
top:100%;
left:0;
right:0;
background:#0b4691;
color:#d1d3d4;
font-weight:400;
-webkit-transition:all .5s ease-in;
-moz-transition:all .5s ease-in;
-ms-transition:all .5s ease-in;
-o-transition:all .5s ease-in;
transition:all .5s ease-in;
list-style:none;
opacity:0;
pointer-events:none
}
.wrapper-dropdown-3 .dropdown li a {
display:block;
padding:5px 10px;
text-decoration:none;
color:#d1d3d4;
border-bottom:1px solid #1e61b6;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out
}
.wrapper-dropdown-3 .dropdown li i {
float:right;
color:inherit
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border:none
}
.wrapper-dropdown-3 .dropdown li:hover a {
background:#1e61b6;
color:#d1d3d4
}
.wrapper-dropdown-3.active .dropdown {
opacity:1;
pointer-events:auto
}
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display:none;
opacity:1;
pointer-events:auto
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display:block
}
.wrapper-dropdown-3:focus .dropdown {
opacity:1;
pointer-events:auto
}