Question

我想弄清楚我选错了什么。我正在尝试单击元素一并显示子元素。

function main(){
  $('.option-button').hide();
  $('.nav-buttons').on('click',function(){
    $('option-button').next().toggle();
  });
}
$(document).ready(main);

.container {
  overflow:auto;
  height: 100%;
  width: 100%;
  border-style: double;
  background-color: #1e1e15;
}

.header {
  font-family: "Ailerons";
  font-size: 125px;
  text-align:center;
  width: auto;
}
h4{
  margin:auto;
  color: blue;
}

.nav-bar{
  width: 75.5%;
  border-style: double;
  margin: auto;
  padding: 0;
}
.nav-buttons {
    list-style-type: none;
    overflow: hidden;
    background-color: white;
}
.option-button{
  list-style-type: none;
  overflow: hidden;
  background-color: white;
}
li {
    float: left;
    display: block;
    font-family: monospace;
    text-align: center;
    padding: 14px 44.3;
    text-decoration: none;
    border-style: dotted;
}

.navigation-pictures {
  width: 75%;
  height: 75%;
  margin:auto;
  margin-top: 100px;
  border-style: double;
  border-color: white;
}

<!DOCTYPE>
<hmtl>
  <head>
    <title>My Home Page!</title>
    <link href = "style.css" type = "text/css" rel = "stylesheet"/>
  </head>
    <body>
      <div class = "container">
          <div class = "header">
            <img src = "images/iceland.png" alt = "Downtown" height="30%" width="55%"/>
          </div>
          <div class = "nav-bar">
            <ul class = "nav-buttons">
              <li>Element 1</li>
                <ul class ="option-button">
                  <li>Element 1 Sub Element 1</li>
                  <li>Element 1 Sub Element 2</li>
                </ul>
              <li>Element 2</li>
              <li>Element 3</li>
              <li>Element 4</li>
              <li>Element 5</li>
              <li style="float:right">Element 6</li>
            </ul>
          </div>
          <div  class = "navigation-pictures">
            <img src = "images/city1.jpg" alt = "Downtown" height="100%" width="100%"/>
         </div>
         <div  class = "navigation-pictures">
           <img src = "images/lighthouse1.jpg" alt = "Lighthouse" height="100%" width="100%"/>
        </div>
        <div  class = "navigation-pictures">
          <img src = "images/moutains.jpg" alt = "Moutains" height="100%" width="100%"/>
       </div>
    </div>
    <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
    <script src='main.js'></script>
    </body>
</html>

Answer 1

非常接近，只需要看看儿童元素

您用来查找孩子option-button的方法很接近但不太正确。在这个代码的工作版本中，我更改了点击功能，使用.children方法查找具有班级option-button

的孩子

工作示例：

＆＃13;

function main(){

  $('.option-button').hide();
  $('.nav-buttons').on('click',function(){

    $(this).children('.option-button').toggle();

  });
}
$(document).ready(main);

＆＃13;

.container {
  overflow:auto;
  height: 100%;
  width: 100%;
  border-style: double;
  background-color: #1e1e15;
}

.header {
  font-family: "Ailerons";
  font-size: 125px;
  text-align:center;
  width: auto;
}
h4{
  margin:auto;
  color: blue;
}

.nav-bar{
  width: 75.5%;
  border-style: double;
  margin: auto;
  padding: 0;
}

.nav-buttons {
    list-style-type: none;
    overflow: hidden;
    background-color: white;
}

.option-button{
  list-style-type: none;
  overflow: hidden;
  background-color: white;
}

li {
    float: left;
    display: block;
    font-family: monospace;
    text-align: center;
    padding: 14px 44.3;
    text-decoration: none;
    border-style: dotted;
}

.navigation-pictures {
  width: 75%;
  height: 75%;
  margin:auto;
  margin-top: 100px;
  border-style: double;
  border-color: white;
}

＆＃13;

<!DOCTYPE>
<hmtl>
  <head>
    <title>My Home Page!</title>
    <link href = "style.css" type = "text/css" rel = "stylesheet"/>
  </head>
    <body>
      <div class = "container">
          <div class = "header">
            <img src = "images/iceland.png" alt = "Downtown" height="30%" width="55%"/>
          </div>
          <div class = "nav-bar">
            <ul class = "nav-buttons">
              <li>Element 1</li>
                <ul class ="option-button">
                  <li>Element 1 Sub Element 1</li>
                  <li>Element 1 Sub Element 2</li>
                </ul>
              <li>Element 2</li>
              <li>Element 3</li>
              <li>Element 4</li>
              <li>Element 5</li>
              <li style="float:right">Element 6</li>
            </ul>
          </div>
          <div  class = "navigation-pictures">
            <img src = "images/city1.jpg" alt = "Downtown" height="100%" width="100%"/>
         </div>
         <div  class = "navigation-pictures">
           <img src = "images/lighthouse1.jpg" alt = "Lighthouse" height="100%" width="100%"/>
        </div>
        <div  class = "navigation-pictures">
          <img src = "images/moutains.jpg" alt = "Moutains" height="100%" width="100%"/>
       </div>
    </div>
    <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
    <script src='main.js'></script>
    </body>
</html>

＆＃13;

Answer 2

我想你想要一些：

将ul放在li元素中而不是外部。点击li元素上的click事件而不是ul。

<ul class = "nav-buttons">
              <li>Element 1<ul class ="option-button">
                  <li>Element 1 Sub Element 1</li>
                  <li>Element 1 Sub Element 2</li>
                </ul>
</li>


$('.nav-buttons li').on('click',function(){
    $(this).find("ul").toggle();
 });

为什么元素没有显示onClick？

2 个答案:

非常接近，只需要看看儿童元素

工作示例：