在按钮单击时显示 ul答案

【问题标题】：Show ul on button click在按钮单击时显示 ul
【发布时间】：2017-08-19 11:31:56
【问题描述】：

我有一个按钮和一个 ul 在它下面，ul 设置为不显示，我想要做的是当我点击按钮时，ul 出现白色背景，我希望按钮采用相同的样式ul，我希望 ul 的宽度与按钮的宽度相同，我该怎么做？这是我的代码：

$("button").click(function () {
    $("ul").show();
    
});

ul{
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> Hello </button>
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

【问题讨论】：

你的意思是按钮应该像ul标签一样带有项目符号和下划线？

标签： css twitter-bootstrap button html-lists

【解决方案1】：

我希望按钮采用与 ul 相同的样式

将 CSS 样式应用于按钮。现在，唯一的区别似乎是font-family。

我希望 ul 的宽度与按钮的宽度相同

使用 CSS 将按钮的width 设置为与无序列表相同。

无序列表向右移动，因为有左填充。减少padding-left 以减少项目移动的距离。 width 和 padding-left 应该加起来就是按钮的 width。

我已经为你添加了一些 CSS。随意更多地玩弄它。

$("button").click(function () {
    $("ul").show();
});

ul {
  display: none;
  width: 85px;
  padding-left: 15px;
}

button {
  font-family: serif;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hello</button>
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

【讨论】：

【解决方案2】：

使用css() 代替show()。

$("button").click(function () {
    $("ul").css("display", "block");
});

ul{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> Hello </button>
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

【讨论】：