jquery點擊顯示/隱藏子菜單不顯示

我有一個菜單hortizontal，水平子和subub菜單。點擊後，子菜單應該出現並保持可見狀態。如果我從子菜單進入頁面，子子菜單應該可見。我搜索了這個網站和網絡尋找答案。jquery點擊顯示/隱藏子菜單不顯示

UPDATE

心中已經修改了劇本，感謝你給的答案，這讓我在正確的方向，發現一個例子這裏計算器。點擊是針對平板電腦的，適用於我喜歡懸停的屏幕。我試圖將腳本與懸停功能結合起來使用。

$('#menu li').hover(function() { 
    $(this).find('ul').show(); 
    }, 
    function() { 
    $(this).find('ul').hide(); 
    });

試圖結合懸停和點擊這樣，但然後懸停是行不通的。我在做什麼錯？

$(document).ready(function(){ 
$('.sub').hide(); 
$('#menu li a').on('click hover ', function(event){ 
if ($(this).next('ul.sub').children().length !== 0) { 
event.preventDefault(); 
} 
$(this).siblings('.sub').slideToggle('slow'); 
}); 
});

CSS

.sub{display:none;}

HTML

<ul id="menu"> 
<li><a href="item.php">Item</a></li> 
<li><a href="item1.php">item1</a> 
    <ul class="sub"> 
    <li><a href="subitem1">subitem1</li> 
     <ul class="subsub"> 
      <li> <a href="subsub1.php">subsub1</a></li> 
      <li> <a href="subsub2.php">subsub2</a></li> 
      <li> <a href="subsub3.php">subsub3</a></li> 
     </ul></li> 
    <li><a href="subitem2.php">subitem2</a></li> 
</ul></li> 
</ul>

jQuery的

//Hide all the sub menus 
$('.sub').hide(); 

$('#menu li a').click(function(event){ 
if ($(this).next('ul.sub').children().length !== 0) { 

} 
$(this).siblings('.sub').slideToggle('slow'); 
}); 
});

來源

2013-08-21 cynthia huet

不能完全確定你的目標是在這裏。只需要顯示子菜單？第二個li包含一個鏈接。如果href有一個值，您將導航到該頁面。所以，子菜單可能會出現，但你永遠不會看到它。更改href =「＃」，你應該看到你的菜單。 – legacybass

你直接的問題是設置一個鏈接，顯示子菜單的菜單選項。當他們被點擊時，它會嘗試將您帶出頁面。

這是一個jsfiddle它工作（據我瞭解）。我還添加了切換功能，所以再次點擊時，它會隱藏菜單：http://jsfiddle.net/9gcnm/1/

而且，只是讓你知道

$(function() { 

});

是jQuery的簡寫

$(document).ready(function(){ 

});

來源

2013-08-21 17:53:57 iRector

感謝您的回答，我嘗試了您的解決方案，在jsfiddle中工作，但不在我的網站中，當我點擊item1，並且該頁面已加載時，子菜單仍未在該頁面上顯示。在我想要子菜單顯示的情況下，是否也應該有一堂課？ –

比方說，你想訪問item1.php的子菜單。 jQuery的會是這個樣子

$(function() { 
    $('a', '#menu').click(function(e) { 
     e.preventDefault(); 
     $(this).parent().find('.sub').show(); 
    }); 
});

這裏是my jsFiddle

更新1：在下面的評論中提到的，用戶不能瀏覽菜單裏面實際的鏈接。爲了解決這個問題，請在您想要允許更改瀏覽器頁面的鏈接中添加一個類（我將使用pageChange）。爲了達到這個需要我的上面的代碼，並將其綁定到您指定的類。您還需要將該類添加到鏈接標記中。

$(function() { 
    $('a', '#menu').click(function(e) { 
     if ($(this).hasClass('pageChange') === true) { 
      return; 
     } 
     e.preventDefault(); 
     $(this).parent().find('.sub').show(); 
    }); 
});

這裏是上面代碼的新的jsfiddle：http://jsfiddle.net/pSKYk/3/

來源

2013-08-21 17:57:05 Mic1780

偉大的子菜單顯示在item1頁面上，只有所有其他鏈接不再工作。 –

如果您向要訪問菜單js的鏈接添加一個類，那麼您可以選擇哪些鏈接可用/下拉菜單 – Mic1780

@cynthiahuet我已經更新了我的代碼。請參閱UPDATE 1 – Mic1780

jquery點擊顯示/隱藏子菜單不顯示

回答

相關問題