1

私のjavascriptに問題があります（私は本当に初心者の状態にあるので、申し訳ありません）

次のようなメニューがあります。

<ul class="menu">
   <li><a href="#">Home</a></li>    
   <li class="shownav"><a href="#">Services</a></li>    
   <li><a href="#">Projects</a></li>    
</ul>

そして、私のコンテンツはこれに似ています：

<div id="contentwrapper">
     <div id="content">
          <!--Content here-->
     </div>
</div>

私が達成したいのは、li.shownav をクリックすると #contentwrapper が 30 ピクセル下にスライドし、2 つ目のナビゲーション バーが表示されることです。

div をトリガーして 30 ピクセル下げる方法はありますか?

4

2 に答える 2

1 
$(document).ready(function() {
    $('.menu li.shownav').click(function() {
        //will auto slide down content below it for it to fit
        $('#navigationBar').slideDown();
    });
});
于 2012-11-10T12:39:27.510 に答える
1

あなたがすべき：

まず、メニューを CSS だけで機能させることを目指します (そうしないと、js 以外のブラウザーではナビゲートできなくなります)。

これは、1 レベルのサブメニュー ドロップダウンがある単純な CSS 水平メニューです。

:hover を使用した CSS

.menu>li{float:left;display:block;padding:10px;position:relative;}
.menu>li.nav>ul,.menu>li.shownav>ul{display:none;position:absolute;top:2em}
.menu>li.nav:hover>ul{display:block;}

Html (著者からわずかに変更:

<ul class="menu">    
  <li><a href="#">Home</a></li>        
    <li class="nav"><a href="#">Services</a>
    <ul>
        <li><a href="#">Submenu</a></li>
    </ul>
  </li>        
  <li><a href="#">Projects</a></li>     
</ul>

JavaScript に依存しない 1 レベルの cssmenu

そして、js (jquery など) の追加を開始します。これは上の単純なバージョンで、slideToggle アニメーション onclick を含みます

.js

$(document).ready(function() {
    $('li.nav').attr('class', 'shownav');//this removes the css class that is targetted by the rules so .js will now take over
    $('.menu li.shownav').click(function() {
        //will auto slide down content below it for it to fit
        $('ul', this).slideToggle();
    });
});

クリックでjquery + cssフォールバックメニューを完成

于 2012-11-10T13:00:59.767 に答える