需要幫助開發一個與jQuery的交互式菜單

我是新來的CSS，HTML和Ajax。需要幫助開發一個與jQuery的交互式菜單

我開發了一個使用HTML和CSS的頁面。

enter image description here

我想要做的是什麼，如果我會點擊離開的信息，那麼它應該顯示其他3個選項，如儀表臺，行動報告。（我想用jQuery來做到這一點）

這應該在下面的同一個表中留下信息，這3個選項應該顯示。是否有可能在jQuery中做？

我該如何解決這個問題？（我不希望使用任何額外的頁面）

編碼我都做

HTML

<table border="2" id="Official_Page_Leftside_Table" name="lefttable" bgcolor="#408080" > 
     <tr><td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Master Data</td></tr> 
     <tr><td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Projects</td></tr> 
     <tr><td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;Leave Information</td></tr> 
    </table>

CSS

#Official_Page_Leftside_Table 
     { 
     width:150px; 
     left:5px; 
     float:left; 
     top:140px; 
     font-size:16px; 
     position:absolute; 
     }

來源

2014-07-01 Cool

看來你混淆了一些東西。這是可以理解的，因爲你必須使用不同的主題來實現你想要做的事情。 1.看起來你使用table來佈局你的文檔，這在開始時似乎更容易，但我向你保證，這對你來說是一個巨大的幫助，開始沒有表格的佈局。 2. Ajax或jQuery不是問題，因爲jQuery是一個Javascript框架，可以（除其他外）幫助您使用ajax（http://api.jquery.com/jquery.ajax/）。 –

「試圖在html中使用ajax」很可能不會對未來的讀者有所幫助。請考慮添加一個有意義的標題 –

感謝您的支持 – Cool

首先，你不需要Ajax來實現你的目標。我們可以簡單地使用jquery來完成。Demo

$('.otherOption').click(function(){ 
    $('.otherActions').slideDown(); 
});

來源

2014-07-01 10:22:54 Era

非常感謝...它工作正常... – Cool

爲什麼它是在即將到來的信息後2行... – Cool

這就是bcoz的空如果你不想要，然後使用此：http://jsfiddle.net/Vvf7L/1/或使用此http://jsfiddle.net/Vvf7L/2/ – Era

jsfiddle

您創建一個列表「離開信息」，並使用隱藏或visibility: none的display: none元素<li>。然後使用Javascript或jQuery綁定一個事件（例如懸停/點擊/鼠標懸停）以將這些<li>元素的CSS更改爲visibility: visible或display: block。

避免使用表格，除非它實際上是製表數據，但事實並非如此。改爲使用列表（或HTML5中的導航）。最好使用CSS來設置列表的樣式，而不是使用表格，因爲它看起來像按鈕。

HTML

<ul> 
    <li>Master Data</li> 
    <li>Projects</li> 
    <li class="hide">Leave Information 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
     </ul> 
    </li> 
</ul>

CSS

.hide ul { 
    visibility: hidden; 
}

JQuery的

$(".hide").hover(
    function() { 
    $(this).children().css({"visibility": "visible"}); 
    }, function() { 
    $(this).children().css({"visibility": "hidden"}); 
    } 
);

另外，您可以將事件綁定到元素，並使用addClass(),removeClass()或toggleClass()刪除隱藏它的類。例如，此方法可以擴展爲允許更改按鈕的顏色，如mouseover。

來源

2014-07-01 10:17:06 dayuloli

感謝您的支持.. – Cool

身體

<table border="2" id="Official_Page_Leftside_Table" name="lefttable" bgcolor="#408080"> 
     <tr> 
      <td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Master Data</td> 
     </tr> 
     <tr> 
      <td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Projects</td> 
     </tr> 
     <tr onclick="ShowLeaveInfo()"> 
      <td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;Leave Information</td> 
     </tr> 
     <tr class="leaveinfo"> 
      <td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;Dash Board</td> 
     </tr> 
     <tr class="leaveinfo"> 
      <td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;Action</td> 
     </tr> 
     <tr class="leaveinfo"> 
      <td height="35px">&nbsp;&nbsp;&nbsp;&nbsp;Report</td> 
     </tr> 
    </table>

加入這個網站繼頭section.Remember JavaScript來添加最新的jQuery文件的jquery.js

function ShowLeaveInfo() { 
      $(".leaveinfo").slideToggle(); 
     }

下面的樣式表

<style type="text/css"> 
     .leaveinfo { 
      display: none; 
     } 
    </style>

其全部完成。

來源

2014-07-01 10:26:04

感謝您的支持... – Cool

需要幫助開發一個與jQuery的交互式菜單

回答

相關問題