为什么元素不会显示onClick？

-2

我想弄清楚我选择不正确。我试图点击元素一和显示子元素。为什么元素不会显示onClick？

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>

来源

2016-11-04 Jengo

**最小**演示将是首选。我们不需要*整个页面* –

如果你点击运行演示，它会显示你到底发生了什么。当单击元素1时不会发生任何事情，但预期会显示其他子元素。 – Jengo

因此，将演示简化为仅有问题的部分。你提供的大部分代码都是不相关的。 –

我想你想一些：

把ul放在li元素中，而不是外部。在li元素上单击事件而不是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(); 
});

来源

2016-11-04 16:44:49 Ciccio

非常接近，只需要看看子元素

的方法，你用找孩子option-button接近，但并不完全正确。在代码的这个工作版本，我改变了点击功能使用.children方法找到它的孩子具有类option-button

工作实例：

function main(){ 
 

 
    $('.option-button').hide(); 
 
    $('.nav-buttons').on('click',function(){ 
 

 
    $(this).children('.option-button').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>

来源

2016-11-04 16:43:46 DominicValenciana

谢谢，你能向我解释为什么next（）不工作？ – Jengo

没问题，所以有几个原因。 1）你正在引用'option-button'错误 2）接下来是用来查找元素的下一个兄弟。所以jquery会做的是找到'option-button'元素，然后查看它后面是否有元素并返回它。在这种情况下，''''''''''''''标签中的'option-button'后面没有元素。 – DominicValenciana

https://api.jquery.com/next/ 欲了解更多关于它如何工作的信息。你想让我在答案中包含这些信息吗？ – DominicValenciana

为什么元素不会显示onClick？

回答

非常接近，只需要看看子元素

工作实例：

相关问题