jQuery的 - 的onclick內容滑下

我有一個問題，我的JavaScript（我是在一個真正的初學者狀態是很抱歉）jQuery的 - 的onclick內容滑下

Ive得到了這樣的菜單：

<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個像素下來，揭示了一個第二導航欄

有什麼辦法可以觸發一個div下降30個像素？

來源

2012-11-10 user1814458

看看這個http://api.jquery.com/slideDown/。可能是你要找的 – Mihai

你可以（也應該）先用css：hover來做到這一點，然後你可以添加javascript來完成向下滑動。 Jquery允許輕鬆地動畫div，例如$（'。shownav'）。slideDown（）; –

$(document).ready(function() { 
    $('.menu li.shownav').click(function() { 
     //will auto slide down content below it for it to fit 
     $('#navigationBar').slideDown(); 
    }); 
});

來源

2012-11-10 12:39:27 nbrooks

其中'navigationBar'僅僅是你的第二個導航欄 – nbrooks

'slideToggle的ID（）「允許隱藏你的第二導航欄如果您在鏈接上再次點擊 – sdespont

燁看到我的回答@Bouillou –

您應該：

首先着眼於使CSS菜單單獨工作（否則非JS瀏覽器將根本無法進行導航）

下面是一個簡單的CSS橫向菜單子菜單的下拉的一個級別

使用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>

Non javascript reliant one level 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(); 
    }); 
});

Finished jquery+css fallback menu with click

來源

2012-11-10 13:00:59

幹得漂亮！ +1 – nbrooks

:)感謝@nbrooks - 我知道用戶只是.js後，但只有經驗讓我們意識到我們需要css後備。感謝+1 –

jQuery的 - 的onclick內容滑下

回答

相關問題