點擊DIV時如何切換UL列表？

點擊DIV時，如何唯一地切換UL列表？我正在嘗試執行以下操作，但是使用切換方法時出現錯誤。點擊DIV時如何切換UL列表？

這裏是有問題的代碼：

<!DOCTYPE html> 

<html> 

<head> 

<script src="jquery-1.11.3.min.js"></script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<style type="text/css"> 
.select:hover { 
    cursor: pointer; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    cursor: pointer; 
} 
ul li { 
    display: none; 
} 
ul li:before{ content:"- ";} 
</style> 

<script type="text/javascript"> 

window.onload = function() { 

    $(".select").click(function() { 
     $('ul').toggle(); 
    }); 


} 
</script> 

</head> 

<body> 
<div class="select" id="numbers">Select Box1 
    <ul> 
     <li>1234</li> 
     <li>5678</li> 
     <li>0123</li> 
    </ul> 
</div> 
<br><br> 
<div class="select" id="letters">Select Box2 
    <ul> 
     <li>abcd</li> 
     <li>efgh</li> 
     <li>ijkl</li> 
    </ul> 
</div> 
<br><br> 
<div class="select" id="fruits">Select Box3 
    <ul> 
     <li>apples</li> 
     <li>bananas</li> 
     <li>oranges</li> 
    </ul> 
</div> 

</body> 

</html>

來源

2016-01-08 Jason Kelly

你('ul').toggle();之前錯過$，你必須切換li不ul因爲YOUE li s的隱藏不ul。嘗試如下。

$(".select").click(function() { 
    $(this).find('ul li').toggle(); 
});

來源

2016-01-08 17:41:53 Azim

好的，我修正了代碼，但是如果select div被點擊，沒有其他事情發生，並且不顯示UL列表。 –

好吧，這個作品，但切換所有3個UL如何才能切換一個？ –

查看最新答案@JasonKelly – Azim

$(".select").click(function() { 
     $('ul').toggle(); 
    });

你錯過UL之前的$。此外，我會通過類或id引用它，而不是HTML標記。該代碼將引用的所有UL的頁面，而不是隻有目標一個

來源

2016-01-08 17:43:37

你應該得到如下圖所示

$(".select").click(function() { 
    $(this).find('ul li').toggle(); 
});

來源

2016-01-08 17:46:34 amitguptageek

當前div和使用選擇，你可以在ul元素選擇所有li元素好吧，我僅僅指剛得到的結果：

window.onload = function() { 
 

 
    $(".select").click(function() { 
 
    $('#' + this.id + ' > ul > li').toggle(); 
 
    }); 
 
}

.select:hover { 
 
    cursor: pointer; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
} 
 
ul li { 
 
    display: none; 
 
} 
 
ul li:before{ content:"- ";}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 

 
<div class="select" id="numbers">Select Box1 
 
    <ul> 
 
     <li>1234</li> 
 
     <li>5678</li> 
 
     <li>0123</li> 
 
    </ul> 
 
</div> 
 
<br><br> 
 
<div class="select" id="letters">Select Box2 
 
    <ul> 
 
     <li>abcd</li> 
 
     <li>efgh</li> 
 
     <li>ijkl</li> 
 
    </ul> 
 
</div> 
 
<br><br> 
 
<div class="select" id="fruits">Select Box3 
 
    <ul> 
 
     <li>apples</li> 
 
     <li>bananas</li> 
 
     <li>oranges</li> 
 
    </ul> 
 
</div>

來源

2016-01-08 17:48:40 gaetanoM

點擊DIV時如何切換UL列表？

回答

相關問題