я добавляю этот код, но теперь sub <li> список меню не открыт..задание выполнено, но не открывает меню

Этот код, который я публикую, представляет собой изображение, код HTML и CSS. Когда я нажимаю на изображение флажка, но не открываю sub <li> . если я напишу код этого.

 $("#menu1 li a").click(function(){$(this).next("ul").toggle(); });

но sub <li> открывается очень быстро. Кто-нибудь скажет мне ??? На этом изображении посмотрите его код. введите описание изображения здесь

 <script> $("#menu1 li a").click(function(){ $(this).next("ul").toggle("slow"); }); $("#menu2 li a").click(function(){ $(this).next("ul").toggle("slow"); }); </script>

 #leftcolsearch { float: left; width: 210px; margin: 0 7px 10px 0; } #leftcolsearch .option { float: left; width: 196px; border: #CCCCCC dotted 1px; border-top: none; padding: 1px 0 10px 10px; } .menu { margin: 0; padding: 0 0 0 2px; } .menu li {list-style: none; float:left; width:185px; margin:0;} .menu li ul{ margin:0; padding:0; margin-left:8px; display:none; } .menu li ul li{ margin:4px 0; padding: 0; line-height: 100%; display: inline; } .menu a { color: #999; background: url(../images/checkbox.png) no-repeat left top; padding: 0 0 0 15px; text-decoration: none; outline: none; } .menu li a.active,.menu li a:hover{ color: #539dbc; background: url(../images/checkboxwc.png) no-repeat left top; display:block; padding: 0 0 0 15px; }

 <div id="leftcolsearch"> <div class="option"> <h4 style="margin-left:7">Date:</h4> <ul class="menu" id="menu1"> <li><a href="">2013</a> <ul> <li><a href="">November</a></li> <li><a href="">December</a></li> </ul> </li> <li><a href="">2014</a> <ul> <li><a href="">January</a></li> <li><a href="">February</a></li> <li><a href="">March</a></li> <li><a href="">April</a></li> <li><a href="">May</a></li> <li><a href="">June</a></li> <li><a href="">July</a></li> <li><a href="">August</a></li> <li><a href="">September</a></li> <li><a href="">October</a></li> <li><a href="">November</a></li> <li><a href="">December</a></li> </ul> </li> </ul> </div> <div class="option"> <h4>Location</h4> <ul class="menu" id="menu2"> <li><a href="">Africa</a> <ul> <li><a href="">Algeria</a></li> <li><a href=""> Angola</a></li> <li><a href=""> Cameroon</a></li> <li><a href=""> Egypt</a></li> <li><a href=""> Kenya</a></li> <li><a href=""> Madagascar</a></li> <li><a href=""> Morocco</a></li> <li><a href=""> Mozambique</a></li> <li><a href=""> Nigeria</a></li> <li><a href=""> South Africa</a></li> <li><a href=""> Tanzania, United Republic Of</a></li> </ul> </li> <li> <a href="">Asia</a> <ul> <li><a href="">Bahrain</a></li> <li><a href=""> Bangladesh</a></li> <li><a href=""> Canada</a></li> <li><a href=""> China</a></li> <li><a href=""> France</a></li> <li><a href=""> Hong Kong</a></li> <li><a href=""> India</a></li> <li><a href=""> Indonesia</a></li> <li><a href=""> Iran, Islamic Republic Of</a></li> <li><a href=""> Israel</a></li> <li><a href=""> Japan</a></li> <li><a href=""> Jordan</a></li> <li><a href=""> Kazakhstan</a></li> <li><a href=""> Korea, Republic Of</a></li> <li><a href=""> Lebanon</a></li> <li><a href=""> Macao</a></li> <li><a href=""> Malaysia</a></li> <li><a href=""> Oman</a></li> <li><a href=""> Pakistan</a></li> <li><a href=""> Philippines</a></li> <li><a href=""> Qatar</a></li> <li><a href=""> Saudi Arabia</a></li> <li><a href=""> Singapore</a></li> <li><a href=""> Sri Lanka</a></li> <li><a href=""> Taiwan, Province Of China</a></li> <li><a href=""> Thailand</a></li> <li><a href=""> Turkey</a></li> <li><a href=""> United Arab Emirates</a></li> <li><a href=""> Vietnam</a></li> </ul> </li> <li><a href=""> Australia</a> <ul> <li><a href="">Australia</a></li> <li><a href=""> Fiji</a></li> <li><a href=""> New Zealand</a></li> </ul> </li> <li> <a href="">Europe</a> <ul> <li><a href="">Austria</a></li> <li><a href=""> Belgium</a></li> <li><a href=""> Bulgaria</a></li> <li><a href=""> Croatia</a></li> <li><a href=""> Czech Republic</a></li> <li><a href=""> Denmark</a></li> <li><a href=""> Estonia</a></li> <li><a href=""> Finland</a></li> <li><a href=""> France</a></li> <li><a href=""> Germany</a></li> <li><a href=""> Greece</a></li> <li><a href=""> Hungary</a></li> <li><a href=""> Ireland</a></li> <li><a href=""> Italy</a></li> <li><a href=""> Lithuania</a></li> <li><a href=""> Monaco</a></li> <li><a href=""> Netherlands</a></li> <li><a href=""> Norway</a></li> <li><a href=""> Poland</a></li> <li><a href=""> Portugal</a></li> <li><a href=""> Romania</a></li> <li><a href=""> Russian Federation</a></li> <li><a href=""> Serbia</a></li> <li><a href=""> Slovakia</a></li> <li><a href=""> Slovenia</a></li> <li><a href=""> Spain</a></li> <li><a href=""> Sweden</a></li> <li><a href=""> Switzerland</a></li> <li><a href=""> Turkey</a></li> <li><a href=""> Ukraine</a></li> <li><a href=""> United Kingdom</a></li> </ul> </li> <li> <a href="">North America</a> <ul> <li><a href="">Canada Costa Rica</a></li> <li><a href=""> Cuba</a></li> <li><a href=""> Mexico</a></li> <li><a href=""> United States</a></li> </ul> </li> <li> <a href="">South America</a> <ul> <li><a href="">Argentina</a></li> <li><a href=""> Brazil</a></li> <li><a href=""> Chile</a></li> <li><a href=""> Colombia</a></li> <li><a href=""> Mexico</a></li> <li><a href=""> Peru</a></li> <li><a href=""> Uruguay</a></li> </ul> </li> </ul> </div> </div>

Related of "я добавляю этот код, но теперь sub <li> список меню не открыт..задание выполнено, но не открывает меню"

user javascript: void (0) в href страница загружается, нет проблемы с javascript, теперь проверьте это …

 <div id="leftcolsearch"> <div class="option"> <h4 style="margin-left:7">Date:</h4> <ul class="menu" id="menu1"> <li><a href="javascript:void(0)">2013</a> <ul> <li><a href="">November</a></li> <li><a href="">December</a></li> </ul> </li> <li><a href="javascript:void(0)">2014</a> <ul> <li><a href="">January</a></li> <li><a href="">February</a></li> <li><a href="">March</a></li> <li><a href="">April</a></li> <li><a href="">May</a></li> <li><a href="">June</a></li> <li><a href="">July</a></li> <li><a href="">August</a></li> <li><a href="">September</a></li> <li><a href="">October</a></li> <li><a href="">November</a></li> <li><a href="">December</a></li> </ul> </li> </ul> </div> <div class="option"> <h4>Location</h4> <ul class="menu" id="menu2"> <li><a href="javascript:void(0)">Africa</a> <ul> <li><a href="">Algeria</a></li> <li><a href=""> Angola</a></li> <li><a href=""> Cameroon</a></li> <li><a href=""> Egypt</a></li> <li><a href=""> Kenya</a></li> <li><a href=""> Madagascar</a></li> <li><a href=""> Morocco</a></li> <li><a href=""> Mozambique</a></li> <li><a href=""> Nigeria</a></li> <li><a href=""> South Africa</a></li> <li><a href=""> Tanzania, United Republic Of</a></li> </ul> </li> <li> <a href="javascript:void(0)">Asia</a> <ul> <li><a href="">Bahrain</a></li> <li><a href=""> Bangladesh</a></li> <li><a href=""> Canada</a></li> <li><a href=""> China</a></li> <li><a href=""> France</a></li> <li><a href=""> Hong Kong</a></li> <li><a href=""> India</a></li> <li><a href=""> Indonesia</a></li> <li><a href=""> Iran, Islamic Republic Of</a></li> <li><a href=""> Israel</a></li> <li><a href=""> Japan</a></li> <li><a href=""> Jordan</a></li> <li><a href=""> Kazakhstan</a></li> <li><a href=""> Korea, Republic Of</a></li> <li><a href=""> Lebanon</a></li> <li><a href=""> Macao</a></li> <li><a href=""> Malaysia</a></li> <li><a href=""> Oman</a></li> <li><a href=""> Pakistan</a></li> <li><a href=""> Philippines</a></li> <li><a href=""> Qatar</a></li> <li><a href=""> Saudi Arabia</a></li> <li><a href=""> Singapore</a></li> <li><a href=""> Sri Lanka</a></li> <li><a href=""> Taiwan, Province Of China</a></li> <li><a href=""> Thailand</a></li> <li><a href=""> Turkey</a></li> <li><a href=""> United Arab Emirates</a></li> <li><a href=""> Vietnam</a></li> </ul> </li> <li><a href="javascript:void(0)"> Australia</a> <ul> <li><a href="">Australia</a></li> <li><a href=""> Fiji</a></li> <li><a href=""> New Zealand</a></li> </ul> </li> <li> <a href="">Europe</a> <ul> <li><a href="">Austria</a></li> <li><a href=""> Belgium</a></li> <li><a href=""> Bulgaria</a></li> <li><a href=""> Croatia</a></li> <li><a href=""> Czech Republic</a></li> <li><a href=""> Denmark</a></li> <li><a href=""> Estonia</a></li> <li><a href=""> Finland</a></li> <li><a href=""> France</a></li> <li><a href=""> Germany</a></li> <li><a href=""> Greece</a></li> <li><a href=""> Hungary</a></li> <li><a href=""> Ireland</a></li> <li><a href=""> Italy</a></li> <li><a href=""> Lithuania</a></li> <li><a href=""> Monaco</a></li> <li><a href=""> Netherlands</a></li> <li><a href=""> Norway</a></li> <li><a href=""> Poland</a></li> <li><a href=""> Portugal</a></li> <li><a href=""> Romania</a></li> <li><a href=""> Russian Federation</a></li> <li><a href=""> Serbia</a></li> <li><a href=""> Slovakia</a></li> <li><a href=""> Slovenia</a></li> <li><a href=""> Spain</a></li> <li><a href=""> Sweden</a></li> <li><a href=""> Switzerland</a></li> <li><a href=""> Turkey</a></li> <li><a href=""> Ukraine</a></li> <li><a href=""> United Kingdom</a></li> </ul> </li> <li> <a href="javascript:void(0)">North America</a> <ul> <li><a href="">Canada Costa Rica</a></li> <li><a href=""> Cuba</a></li> <li><a href=""> Mexico</a></li> <li><a href=""> United States</a></li> </ul> </li> <li> <a href="">South America</a> <ul> <li><a href="">Argentina</a></li> <li><a href=""> Brazil</a></li> <li><a href=""> Chile</a></li> <li><a href=""> Colombia</a></li> <li><a href=""> Mexico</a></li> <li><a href=""> Peru</a></li> <li><a href=""> Uruguay</a></li> </ul> </li> </ul> </div> </div>

Тот же Html

 <div id="leftcolsearch"> <div class="option"> <h4 style="margin-left:7">Date:</h4> <ul class="menu" id="menu1"> <li><a href="">2013</a> <ul> <li><a href="">November</a></li> <li><a href="">December</a></li> </ul> </li> <li><a href="">2014</a> <ul> <li><a href="">January</a></li> <li><a href="">February</a></li> <li><a href="">March</a></li> <li><a href="">April</a></li> <li><a href="">May</a></li> <li><a href="">June</a></li> <li><a href="">July</a></li> <li><a href="">August</a></li> <li><a href="">September</a></li> <li><a href="">October</a></li> <li><a href="">November</a></li> <li><a href="">December</a></li> </ul> </li> </ul> </div> <div class="option"> <h4>Location</h4> <ul class="menu" id="menu2"> <li><a href="">Africa</a> <ul> <li><a href="">Algeria</a></li> <li><a href=""> Angola</a></li> <li><a href=""> Cameroon</a></li> <li><a href=""> Egypt</a></li> <li><a href=""> Kenya</a></li> <li><a href=""> Madagascar</a></li> <li><a href=""> Morocco</a></li> <li><a href=""> Mozambique</a></li> <li><a href=""> Nigeria</a></li> <li><a href=""> South Africa</a></li> <li><a href=""> Tanzania, United Republic Of</a></li> </ul> </li> <li> <a href="">Asia</a> <ul> <li><a href="">Bahrain</a></li> <li><a href=""> Bangladesh</a></li> <li><a href=""> Canada</a></li> <li><a href=""> China</a></li> <li><a href=""> France</a></li> <li><a href=""> Hong Kong</a></li> <li><a href=""> India</a></li> <li><a href=""> Indonesia</a></li> <li><a href=""> Iran, Islamic Republic Of</a></li> <li><a href=""> Israel</a></li> <li><a href=""> Japan</a></li> <li><a href=""> Jordan</a></li> <li><a href=""> Kazakhstan</a></li> <li><a href=""> Korea, Republic Of</a></li> <li><a href=""> Lebanon</a></li> <li><a href=""> Macao</a></li> <li><a href=""> Malaysia</a></li> <li><a href=""> Oman</a></li> <li><a href=""> Pakistan</a></li> <li><a href=""> Philippines</a></li> <li><a href=""> Qatar</a></li> <li><a href=""> Saudi Arabia</a></li> <li><a href=""> Singapore</a></li> <li><a href=""> Sri Lanka</a></li> <li><a href=""> Taiwan, Province Of China</a></li> <li><a href=""> Thailand</a></li> <li><a href=""> Turkey</a></li> <li><a href=""> United Arab Emirates</a></li> <li><a href=""> Vietnam</a></li> </ul> </li> <li><a href=""> Australia</a> <ul> <li><a href="">Australia</a></li> <li><a href=""> Fiji</a></li> <li><a href=""> New Zealand</a></li> </ul> </li> <li> <a href="">Europe</a> <ul> <li><a href="">Austria</a></li> <li><a href=""> Belgium</a></li> <li><a href=""> Bulgaria</a></li> <li><a href=""> Croatia</a></li> <li><a href=""> Czech Republic</a></li> <li><a href=""> Denmark</a></li> <li><a href=""> Estonia</a></li> <li><a href=""> Finland</a></li> <li><a href=""> France</a></li> <li><a href=""> Germany</a></li> <li><a href=""> Greece</a></li> <li><a href=""> Hungary</a></li> <li><a href=""> Ireland</a></li> <li><a href=""> Italy</a></li> <li><a href=""> Lithuania</a></li> <li><a href=""> Monaco</a></li> <li><a href=""> Netherlands</a></li> <li><a href=""> Norway</a></li> <li><a href=""> Poland</a></li> <li><a href=""> Portugal</a></li> <li><a href=""> Romania</a></li> <li><a href=""> Russian Federation</a></li> <li><a href=""> Serbia</a></li> <li><a href=""> Slovakia</a></li> <li><a href=""> Slovenia</a></li> <li><a href=""> Spain</a></li> <li><a href=""> Sweden</a></li> <li><a href=""> Switzerland</a></li> <li><a href=""> Turkey</a></li> <li><a href=""> Ukraine</a></li> <li><a href=""> United Kingdom</a></li> </ul> </li> <li> <a href="">North America</a> <ul> <li><a href="">Canada Costa Rica</a></li> <li><a href=""> Cuba</a></li> <li><a href=""> Mexico</a></li> <li><a href=""> United States</a></li> </ul> </li> <li> <a href="">South America</a> <ul> <li><a href="">Argentina</a></li> <li><a href=""> Brazil</a></li> <li><a href=""> Chile</a></li> <li><a href=""> Colombia</a></li> <li><a href=""> Mexico</a></li> <li><a href=""> Peru</a></li> <li><a href=""> Uruguay</a></li> </ul> </li> </ul> </div> </div>

Тот же Css

 #leftcolsearch { float: left; width: 210px; margin: 0 7px 10px 0; } #leftcolsearch .option { float: left; width: 196px; border: #CCCCCC dotted 1px; border-top: none; padding: 1px 0 10px 10px; } .menu { margin: 0; padding: 0 0 0 2px; } .menu li { list-style: none; float:left; width:185px; margin:0; } .menu li ul { margin:0; padding:0; margin-left:8px; display:none; } .menu li ul li { margin:4px 0; padding: 0; line-height: 100%; display: inline; } .menu a { color: #999; background: url(../images/checkbox.png) no-repeat left top; padding: 0 0 0 15px; text-decoration: none; outline: none; } .menu li a.active, .menu li a:hover { color: #539dbc; background: url(../images/checkboxwc.png) no-repeat left top; display:block; padding: 0 0 0 15px; }

В JQuery Вы можете использовать так, чтобы вы могли использовать preventDefault ()

 $("#menu1 li a").click(function (e) { $(this).next("ul").toggle("slow"); e.preventDefault(); }); $("#menu2 li a").click(function (a) { $(this).next("ul").toggle("slow"); a.preventDefault(); });

Попробуйте эту скрипту