Question

我有一个按钮和一个ul，ul设置为none，我想要做的是当我点击按钮时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>

Answer 1

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

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

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

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

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

我为你添加了一些CSS。随意玩更多。

＆＃13;

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

＆＃13;

ul {
  display: none;
  width: 85px;
  padding-left: 15px;
}

button {
  font-family: serif;
  width: 100px;
}

＆＃13;

<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>

＆＃13;

Answer 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>

按钮点击显示ul

2 个答案: