爲什麼元素不會顯示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？

回答

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

工作實例：

相關問題