javascript - 如何在同一个地方设置可扩展图标

Question

如何设置可扩展图标。(即)让我们考虑表格有这么多行好吗如果您通过单击查看按钮查看一行。 [ View 按钮应包含 (+) 符号以及 (-) 这两个符号将位于同一位置。] 如果您单击 View 按钮，该符号将自动更改为 (-)。然后如果您单击另一行。现有的 (-) 符号将更改为 (+)。现在当前行将更改为 (-)。如果你清除这意味着......

如何在同一个地方同时设置+图标和-图标

Answer 1

假设您有以下按钮

<input type="button" class="expand" onclick="MyAction(this)" />

你的 CSS 类将是

.expand
{
 background-image: (Path for Expand icon)
}

.collaps
{
 background-image: (Path for collaps icon)
}

你将拥有如下的 javascript

<script type="text/javascript">
function MyAction(element)
{
  if(element.className =="expand")
 {
   // logic for collaps behavior
   element.className = "collaps";
 }
 else
{
   // logic for expand behavior
   element.className = "expand";
}
}
</script>

您将需要更多 CSS 技巧来修复和对齐图标，但我希望您能轻松做到:)