0

水平サブメニューとサブサブメニューを備えた、水平メニューがあります。クリックすると、サブメニューが表示され、表示されたままになります。サブメニューからページに移動すると、サブサブメニューが表示されるはずです。このサイトとウェブで答えを探しました。

アップデート

あなたがくれた答えのおかげで、私はスクリプトを修正しました。クリックはタブレット eo の場合、画面の場合はホバーが好きです。スクリプトをホバー機能と組み合わせようとしましたが、機能します。

    $('#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>

Jクエリ

 //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');
});
});
4

2 に答える 2

1

item1.php のサブメニューにアクセスしたいとしましょう。jQueryは次のようになります

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

これが私の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-21T17:57:05.120 に答える
0

当面の問題は、サブメニューを表示するメニュー オプションへのリンクを設定することです。それらがクリックされると、ページから移動しようとします。

これが機能するjsfiddleです（私の理解では）。トグル機能も追加したので、もう一度クリックするとメニューが非表示になります: http://jsfiddle.net/9gcnm/1/

また、あなたが知っているように

$(function() {

});

はjQueryの省略形です

$(document).ready(function(){

});
于 2013-08-21T17:53:57.667 に答える