Question

我有简单的html代码，例如jsfiddle file，显示名为<a> tag的{{1}}。我要做的是当我点击这个标签Test时，一个名为Test的新div，其中包括另外两个surveySummaryMenu <a> tag和v1 Test应该是显示。我这样做是通过使用CSS：

v2 Test

但我好像不行。谁能有想法？

Answer 1

你可以这样做： JS：

<script>
    function menuButton() { 
    document.getElementById("menu").style.display = 'block'; 
  }
</script>

HTML：

<div class="row" >
  <ul class=" nav surveySummaryList">
    <li>
      <a href="javascript:" onclick="menuButton();">
        <span>Test</span>
      </a>
      <div class="surveySummaryMenu" id="menu">
        <ul class="nav navbar">
          <li>
            <a href="javascript:">
              <i></i> v.<span>2</span>
              <span>
                <span>Test</span>
              </span>
            </a>
          </li>

          <li>
            <a href="javascript:">
              <i></i> v.<span>1</span> 
              <span> 
                <span>Test</span>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

CSS：

.surveySummaryList .surveySummaryList {
  margin-left: 10px;
}

.surveySummaryList>.active {
  padding-left: 6px;
  background-color: #EEEEEE;
}

.surveySummaryList .surveySummaryMenu a {
  color: white;
}


.surveySummaryList .surveySummaryMenu a:active,
.surveySummaryList .surveySummaryMenu a:visited {
  background: rgba(0, 0, 0, 0.8);
}

.surveySummaryList>li .surveySummaryMenu {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
  color: white;
  width: 100%;
  min-width: 200px;
  z-index: 1001;
}


.surveySummaryList> .active >.surveySummaryMenu {
  display: inherit;
}

使用CSS显示隐藏的项目

1 个答案: