Форум

Nevrali · #1 (**permalink**) 27.07.2014, 19:16

С помощью toggle по клику появляется Раздел 1, но не получается пррисвоить ей функцию , которая по клику в Раздел 1 изменяла бы видимость подразделов.
Хочу что бы по клику по Разделам появлялись подразделы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>index.php</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {   
$("#menu li:first").click(function () {
$(".menu1").toggle(200); 
$("#menu2").click(function () {
$("#menu2").toggle(200);  
}); 
});
});
</script>
<style>
*{
padding: 0;
margin: 0;
border: none;
overflow:hidden
}
body {
background: rgb(197, 197, 197);
width: 100%;
height: 100%;
} 
li{
list-style:none
}
.menu1,.menu2{
display:none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul id="menu">
        <li><a href="#">МЕНЮ</a></li>
        <li>
                <a href="#" class="menu1">Раздел 1</a>
                <ul class="menu2">
                        <li><a href="#">Подраздел</a></li>
                        <li><a href="#">Подраздел</a></li>
                        <li><a href="#">Подраздел</a></li>
                        <li><a href="#">Подраздел</a></li>
                </ul>
        </li>
</ul>
</body>
</html>

рони · #2 (**permalink**) 27.07.2014, 19:40

Nevrali,
строка 11 у вас будет навешивать клик за кликом ... может готовое взять коих на форуме 100500
Выпадающее меню на jquery

Nevrali · #3 (**permalink**) 28.07.2014, 13:54

Готовое конечно проще, но разобраться самому в этом разумнее. Спасибо за направление
Я думаю, что функцию вызывать по имени нужно

рони · #4 (**permalink**) 28.07.2014, 14:24

Nevrali,

<!DOCTYPE HTML>
<html>
<head>
<title>index.php</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
	$(document).ready(function ()
	  {
	    $("#menu li:first").click(function (event)
	      {event.preventDefault();
	        $(this).next().toggle(200);}
	    );
	    $(".menu1").click(function (event)
	      {event.preventDefault();
	        $(this).next().toggle(200);
	      }
	    );
	  }
	);
</script>
<style>
*{
padding: 0;
margin: 0;
border: none;
overflow:hidden
}
body {
background: rgb(197, 197, 197);
width: 100%;
height: 100%;
}
li{
list-style:none
}
#menu > li:nth-child(n + 2),.menu2{
display:none;
}

</style>
</head>
<body>
<ul id="menu">
        <li><a href="#">МЕНЮ</a></li>
        <li>
                <a href="#" class="menu1">Раздел 1</a>
                <ul class="menu2">
                        <li><a href="#">Подраздел</a></li>
                        <li><a href="#">Подраздел</a></li>
                        <li><a href="#">Подраздел</a></li>
                        <li><a href="#">Подраздел</a></li>
                </ul>
        </li>
</ul>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript