jquery - 将子列表居中

Question

两个问题:第一:我怎样才能在“列表”下将两个元素命名为“一”类？第二:如何在“一个”和“两个”元素 1-3 下居中？

我尝试了多种选择，但都没有用。这是我得到的:

jQuery(document).ready(function($) 
{
    $(".main ul").hide();
    $(".main").click(function() 
	{
        $(".main ul").slideToggle(200);
    });
});

.main, .one, .two
{
    list-style-type: none;
}
.main
{
    cursor: pointer;
    display: inline-block;
}

.one, .two
{
    cursor: default;
    display: inline-block;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<li class="main"><h3>List</h3>
                            <ul>
                                <li class="one">One</li>
                                    <ul>
                                        <li class="two">Item 1</li>
                                        <li class="two">Item 2</li>
                                        <li class="two">Item 3</li>
                                    </ul>
                                <li class="one">Two</li>
                                    <ul>
                                        <li class="two">Item 1</li>
                                        <li class="two">Item 2</li>
                                        <li class="two">Item 3</li>
                                    </ul>
    </ul>
</li>

Answer 1

对您要实现的目标的描述有点模糊，但希望这很接近。

首先，您需要修改 HTML 以使其有效。只有 li 元素可能是 ul 的直接后代，因此需要包含子 ul 元素。此外，.one 元素的 CSS 样式意味着它们并排显示，而不是在彼此下方显示。试试这个:

jQuery(document).ready(function($) {
  $(".main ul").hide();
  $(".main").click(function() {
    $(".main ul").slideToggle(200);
  });
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.main {
  cursor: pointer;
}
.two {
  cursor: default;
  padding: 0;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul>
  <li class="main">
    <h3>List</h3>
    <ul>
      <li class="one">One
        <ul>
          <li class="two">Item 1</li>
          <li class="two">Item 2</li>
          <li class="two">Item 3</li>
        </ul>
      </li>
      <li class="one">Two
        <ul>
          <li class="two">Item 1</li>
          <li class="two">Item 2</li>
          <li class="two">Item 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>