Question

我是CSS，HTML和Ajax的新手。

我使用HTML和CSS开发了一个页面。

enter image description here

我想要做的是，如果我点击留下信息，那么它应该显示另外3个选项，如DashBoard，Action，Report。（我想用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;
      }

Answer 1

首先，您不需要Ajax来实现您想要实现的目标。我们可以简单地使用jquery来完成它。的 Demo

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

Answer 2

<强> jsfiddle

您可以为“离开信息”创建一个列表，并使用<li>或visibility: none隐藏display: none元素。然后使用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上按钮颜色等内容。

Answer 3

在正文中添加此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 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>

在Head部分中跟随JavaScript。记住添加最新的jquery文件jquery.js

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

关注样式表

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

全部完成。

需要帮助使用jquery开发交互式菜单

3 个答案: