0
私はアコーディオンで構成されたメニューを持っています。その理由は、私は水平なものを欲しかったので、4つの異なるアコーディオンに対して同じdivを4回追加し、それらを水平に整列させたからです。divの複数のアコーディオンにmouseleave関数を追加しますか？
現在のところ、マウスクリックで開いています。私がホバリングするように変更すると、それが開きます。カーソルをサブメニューに移動すると、サブメニューが後退します。したがって、サブメニューをクリックすることはできません。
ご協力いただければ幸いです。私はdivから離れて移動したときにキャンセルするjqueryの行を追加しようとしましたが、動作しませんでした。
CODE
$(document).ready(function(){
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
$("#cssmenu").mouseleave(close_cssmenu); //Line which I tried but did not work
});@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
.glyphicon {
font-size: 14px;
}
#cssmenu {
float: right;
display:inline-block;
width: auto; height: auto;
border-bottom: 4px solid #656659;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.img2 {
padding: 6px;
}
#cssmenu > ul > li {
background: #e94f31;
background: -moz-linear-gradient(#e94f31 0%, #d13516 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516));
background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%);
background: linear-gradient(#e94f31 0%, #d13516 100%);
}
#cssmenu > ul > li:hover {
background: #e84323;
background: -moz-linear-gradient(#e84323 0%, #c33115 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115));
background: -webkit-linear-gradient(#e84323 0%, #c33115 100%);
background: linear-gradient(#e84323 0%, #c33115 100%);
}
#cssmenu > ul > li > a {
font-size: .9em;
display: block;
background: url(menu_images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #ba2f14;
border-top: none;
text-shadow: 0 -1px 1px #751d0c;
}
#cssmenu > ul > li > a > span {
display:block;
padding: 12px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.has-sub > a span {
background: url(menu_images/icon_plus.png) 96% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(menu_images/icon_minus.png) 96% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
background: #fff;
border-right: 1px solid #a2a194;
border-left: 1px solid #a2a194;
}
#cssmenu ul ul li {
padding: 0;
border-bottom: 1px solid #d4d4d4;
border-top: none;
background: #f7f7f7;
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#cssmenu ul ul li:last-child {
border-bottom: none;
}
#cssmenu ul ul a {
padding: 10px 10px 10px 25px;
display: block;
color: #676767;
font-size: .8em;
font-weight: normal;
}
#cssmenu ul ul a:before {
content: '\00BB';
position: absolute;
left: 10px;
color: #e94f31;
}
#cssmenu ul ul a:hover {
color: #e94f31;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
<img class="img2" src="http://www.arabiantcl.com/images/icons/house-24.png" alt="home" />Welcome back, John Smith</a>
<ul>
<li style="list-style:none;"><a href="#">Home</a></li>
<li style="list-style:none;"><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;">
<a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
<img class="img2" src="http://www.arabiantcl.com/images/icons/paper-24.png" alt="order-history" />History</a>
<ul>
<li style="list-style:none;"><a href="#">Order History</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
<img class="img2" src="http://www.arabiantcl.com/images/icons/businessman-24.png" alt="profile" />Profile</a>
<ul>
<li style="list-style:none;"><a href="#">Edit Profile</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">
<img class="img2" src="http://www.arabiantcl.com/images/icons/purchase-order-24.png" alt="home" />Load Request</a>
<ul>
<li style="list-style:none;"><a href="#">Airport</a></li>
<li style="list-style:none;"><a href="#">City</a></li>
<li style="list-style:none;"><a href="#">Seaport</a></li>
</ul>
</li>
</ul>
</div>ノートは、私はすでに私のindex.phpにjQueryライブラリを用意しました。私はPHPを削除します。今のところログインしているユーザーのユーザー名を取得するだけです。
サイトへの働きリンクがありますか？ – Miro
残念ながら、まだオフラインですが、これは私のテスト環境で行われたばかりです。 – MailBlade
'close_cssmenu'とは何ですか？ – LGSon