1

これは関連する質問かもしれませんが、良い解決策が見つからなかったので、ここに私の質問があります。いくつかのサブアイテムを含む水平メニューがあります。メインメニューをクリックした瞬間にサブメニューが表示され、ページのどこをクリックしても開いたままになります。しかし、ここがトリッキーな部分です。メニュー項目 (サブメニュー内) をクリックすると、サブメニューにそのページの項目が表示されます。たとえば、メニューは次のようになります: ホーム、ページ 1、ページ 2 およびサブメニュー (ページ 1 の): ページ 1a、ページ 1b。したがって、page1 をクリックすると、page1a と page1b のサブメニューが開きますが、page1a をクリックすると、page1a のページが開きますが、サブメニューは閉じたままですが、page1 のサブメニューを表示します。これが私が持っているhtmlメニューです:

<ul id="topnav">
    <li>
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="#">Over Meves</a>
        <!--Submenu begint hier-->
        <span>
            <a href="#">Historie</a> |
            <a href="#">Onze mensen</a> |
            <a href="#">Werkzijze</a>
        </span>
    </li>
    <li>
        <a href="#">Disciplines</a>
        <!--Submenu begint hier-->
        <span>
            <a href="vervolg.html">Klimaatbeheersing</a> |
            <a href="#">Elektrotechniek</a> |
            <a href="#">Sanitaire techniek</a> |
            <a href="#">Energiebesparingstechniek</a> |
            <a href="#">Bouwfysica en geluid</a> |
            <a href="#">Diensten energiebesparing</a>
        </span>
    </li>
    <li>
        <a href="#">Expertise</a>
        <!--Submenu begint hier-->
        <span>
            <a href="#">Woningbouw & Utiliteit</a> |
            <a href="#">Zorg & Welzijn</a> |
            <a href="#">Milieu & Energie</a> |
            <a href="#">Beheer & Onderhoud</a> |
            <a href="#">EPA & EPC</a> |
            <a href="#">Legionella beheersing</a>
        </span>             
    </li>
    <li>
        <a href="#">Contact</a>
        <!--Submenu begint hier-->
        <span>
            <a href="#">Adres & route</a> |
            <a href="#">Werken bij</a>
        </span>
    </li>
</ul>

サブメニューを開く jquery:

<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
ddmenuitem = $(this).find('span').css('display', 'block');
}
function jsddm_close()
{  
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
$('#topnav > li').bind('click', jsddm_open)
$('#topnav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#topnav li a').removeClass('active');
$(this).addClass('active');
}
});
$('.project-tekst').trimTxt();
});
</script>

そしてメニューのcss：

ul#topnav 
{
float: left;
width: 900px;
background: #00537F;
padding: 0;
margin: 0;
margin-top: 3px;
position: relative;
list-style: none;
font-size: 12px;
}
ul#topnav li 
{
float: left;
margin: 0;
padding: 0;
}
ul#topnav li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
ul#topnav li a:link
{
color: #FFF;
text-decoration: none;
}
ul#topnav li a:visited
{
color: #FFF;
text-decoration: none;
}
ul#topnav li a:hover
{
color: #FFF;
text-decoration: underline;
}
ul#topnav li a.active
{
text-decoration: underline;
color: #FFF;
}
ul#topnav li span 
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
ul#topnav li span a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
ul#topnav li span a:link
{
color: #00537F;
}
ul#topnav li span a:visited
{
color: #00537F;
}
ul#topnav li span a:hover
{
text-decoration: underline;
color: #00537F;
}
ul#topnav li span a.active
{
text-decoration: underline;
color: #00537F;
}

皆さんがこれで私を助けてくれることを願っています。

ありがとう

4

1 に答える 1

0

問題を理解できたかどうかわかりません。

ここで私がjsfiddleで行ったこと: http://jsfiddle.net/QQQdH/765/

最初に、現在のクラスを Disciplines メニューに追加しました (Discipline ページにいた場合と同様)。

 <a href="http://google.com/" class="current">Disciplines</a>

2 つ目は、クリック リスナー内で、現在の状態になったときに伝播 (href への移動) を停止します。

   $('#topnav > ul > li > a').click(function(ev){
    if ($(this).hasClass('current')) {
        ev.preventDefault();
    }

なので、このメニューだと、href="something" があってもサブメニューが見れます。

于 2014-03-19T21:24:49.090 に答える